Angular2 中的 HTML 捆绑

Question

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

但是，在我的组件中，我使用：

tempalateUrl: '....'

现在：

1. 如何将 html 打包到一个文件中？
2. angular2 会直接看到这些 html 吗？

Answer 1

有一个 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 正常使用它们了……另外，这是 gulp 4 的，如果某些选项很奇怪，这就是为什么 (: