在生产中“编译”HTML 模板的最佳方式是什么？

Question

我正在开发我的第一个 Angular2 应用程序，我正在使用这个文件夹结构：

components
    component1
        home.component.ts
        home.component.html
        home.component.scss

我正在使用 Gulp 运行构建应用程序的任务。最终的文件夹结构将是这个：

scripts
    somefile1.js
    somefile2.js
    ...
styles
    mine.css
    vendor.css
index.html
favicon.ico

您能告诉我在 Javascript 文件中合并 HTML 模板的最佳方式是什么吗？ 此外，我将能够轻松调试代码，因此我会在浏览器的检查工具中看到原始文件夹结构。 我目前正在使用gulp-sourcemaps 插件和sourceMap 选项设置为true，以便Typescript 编译器对样式和脚本执行相同的操作。

我可以使用哪些节点插件来实现 HTML 模板的这一目的？

Answer 1

我在多个项目中使用了gulp-angular-embed-templates，并取得了巨大成功。

这是一个示例任务：

gulp.task('embed-templates', () => {
    gulp.src('app/**/**.js')
        .pipe(embedTemplates({sourceType:'js', minimize: {quotes: true, empty: true}}))
        .pipe(gulp.dest('app/'));
});