在生产中 "compile" 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

您能告诉我将 HTML 模板合并到 Javascript 文件中的最佳方法是什么吗？此外，我可以轻松调试代码，因此我可以在浏览器的检查工具中看到原始文件夹结构。我目前正在使用 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/'));
});

在生产中 "compile" HTML 模板的最佳方式是什么？

What is the best way to "compile" HTML templates in production?

templates

typescript

angular

gulp

source-maps