Question

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

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

tempalateUrl: '....'

现在：

如何将html＆＃s捆绑到一个文件中？
angular2会看到开箱即用的那些htmls吗？

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，如果有些选项很奇怪，那就是原因（：

Angular2中的HTML捆绑

1 个答案: