在Angular2中捆绑HTML [英] HTML bundling in Angular2

问题描述

我已经设法将所有的JS文件与SystemJS Builder捆绑在一起。现在，我想缩小和concat所有的html文件。

然而，在我的组件中，我使用：

  tempalateUrl：'....'
  

现在：

1. 如何将html绑定到一个文件中？


2. angular2会将这些htmls从

解决方案

有一个gulp插件可以很好地完成这项工作 gulp-inline-ng2-template 。这是我使用的任务（由于CSS处理管道，有点长）：

  gulp 
 .src（'src / app / ** / *。ts'，{since：gulp.lastRun（'typescript'）}）
 .pipe（plugins.replace（'.css'，'.styl'） ）
.pipe（plugins.inlineNg2Template（{
 useRelativePaths：true，
 removeLineBreaks：true，
 supportNonExistentFiles：true，
 templateProcessor :( ext，content，cb） => {
 try {
 const minify = require（'html-minifier'）。minify; 
 var html = minify（content，{
 collapseWhitespace：true，
 caseSensitive：true，
 removeComments：true，
 removeRedundantAttributes：true 
}）; 
 cb（null，html）; 
} catch（err）{cb （err）;} 
}，
 styleProcessor：（ext，content，cb）=> {
 try {
 const postcss = require（'postcss'）; 
 const csso = require（'csso'）; 
 const autoprefixer = require（'autoprefixer'）; 
 const stylus = require（'stylus'）; 
 
 var css = stylus.render（content）; 
 css = postcss（[autoprefixer]）。process（css）.css; 
 css = csso.minify（css）.css; 
 cb（null，css）; 
} catch（err）{cb（err）; } 
 .pipe（plugins.typescript（tsProject，undefined，tsReporter））
 .pipe（gulp.dest（'dist'））;} 
} 
  

一旦你编译这样的文件，你可以通过systemjs bundler来正常使用它们......此外，如果有些选项很奇怪，那就是为什么（：

I've already managed to bundle all of my JS files with SystemJS Builder. Now, I want to minify and concat all of my html files.

However, in my components, I use:

tempalateUrl: '....'

Now:

1. How can I bundle html's into one file?
2. Will angular2 see those htmls out of the box?

解决方案

There's a gulp plugin that does the job nicely gulp-inline-ng2-template. This is the task I'm using (a bit long, because of the CSS processing pipeline):

gulp
  .src('src/app/**/*.ts', { since: gulp.lastRun('typescript') })
  .pipe(plugins.replace('.css', '.styl'))
  .pipe(plugins.inlineNg2Template({
    useRelativePaths: true,
    removeLineBreaks: true,
    supportNonExistentFiles: true,
    templateProcessor: (ext, content, cb) => {
      try {
        const minify = require('html-minifier').minify;
        var html = minify(content, {
          collapseWhitespace: true,
          caseSensitive: true,
          removeComments: true,
          removeRedundantAttributes: true
        });
        cb(null, html);
      } catch (err) { cb(err); }
    },
    styleProcessor: (ext, content, cb) => {
      try {
        const postcss = require('postcss');
        const csso = require('csso');
        const autoprefixer = require('autoprefixer');
        const stylus = require('stylus');

        var css = stylus.render(content);
        css = postcss([autoprefixer]).process(css).css;
        css = csso.minify(css).css;
        cb(null, css);
      } catch (err) { cb(err); }
    },
  }))
  .pipe(plugins.typescript(tsProject, undefined, tsReporter))
  .pipe(gulp.dest('dist'));

Once you compile files like this, you can use them normally with systemjs bundler... Also, this is for gulp 4, if some options are strange, that's why (:

这篇关于在Angular2中捆绑HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！