【问题标题】：combine html template files into one JS file将html模板文件合并为一个JS文件
【发布时间】：2016-12-30 04:44:28
【问题描述】：

我有 HTML 模板文件（下划线模板语法）
这些文件以 HTML 格式保存，以便于编辑（IDE 语法突出显示）
我不想用 ajax 来获取它们，而是将它们全部组合起来，并将它们包含在一个js 文件中。
使用 GULP 作为我的任务运行器，我希望它以某种方式将combine all 的 HTML 转换成这样的东西，作为我可以包含在我的 BUILD 过程中的 javascript 文件：

template_file_name 是 HTML 文件名。

var templates = {
   template_file_name : '...template HTML string...',
   template_file_name2 : '...template HTML string...',
   template_file_name3 : '...template HTML string...'
}

我真的不知道如何处理这个问题，以及如何从所有文件中创建这样的文本。是的，我可以将每个单独的文件转换为字符串，但我怎样才能将它放入对象中？

更新 - 15 年 10 月 25 日 - ES6 模块：

对于那些想要你的模板作为 ES6 模块的人，我创建了gulp-file-contents-to-modules

演示输出：

export var file_name = "This is bar.";
export var file_name2 = "This is foo.\r\n";
export var my-folder__file_name = "This is baz.\r\n";

我所有与使用 gulp 组合模板文件相关的 NPM 包：

【问题讨论】：

标签： javascript underscore.js gulp underscore.js-templating

【解决方案1】：

我发现这个很棒的工具完全符合我的要求：

https://www.npmjs.org/package/gulp-template-compile

用法（就这么简单）：

gulp.task('templates', function () {
    gulp.src('./views/templates/**/*.html')
        .pipe(template()) // converts html to JS
        .pipe(concat('templates.js'))
        .pipe(gulp.dest('./js/dist/'))
});

然后您可以使用window.JST 访问键/值对象。值是函数（我不知道为什么，但就是这样）

更新 - 2015 年 8 月 21 日

我决定使用 gulp-file-contents-to-json，这是从文件内容生成 JSON 的最简单方法。

更新 - 2016 年 7 月 19 日

我创建了 3 个 NPM 包（可能对某人很方便）：

【讨论】：

【解决方案2】：

我刚刚为所有handlebars.js 用户发现的另一个工具是gulp-handlebars。

https://www.npmjs.com/package/gulp-handlebars

https://github.com/lazd/gulp-handlebars

根据我的需要调整示例 gulp 任务后，我能够将 template.js 包含在我的 index.html 中，并通过 Template.[filename]() 使用 Handlebars 包装器访问每个模板。

例如Template.cart(data); 返回填充了所有数据的 HTML 字符串。

【讨论】：

我不认为这样的工具应该关心它是由哪些文件提供的。你给它文件，它会创建一个带有变量（文件名）的javascript文件等于该文件的内容（在字符串中）。就是这样。
我同意。然而 - 它存在并且我尝试过它，所以它是一个可能的解决方案。也会试试你推荐的那个。
@vsync 显然您链接的工具也确实关心它提供的文件。

【解决方案3】：

您可以使用https://www.npmjs.org/package/gulp-html-to-json。

它具有多种功能并且非常易于使用。它将准确生成您需要的输出。

var templates = {
   template_file_name : '...template HTML string...',
   template_file_name2 : '...template HTML string...',
   template_file_name3 : '...template HTML string...'
}

如果你使用angularjs，它还有angulartemplateCache生成器。

【讨论】：

谢谢，我会检查一下。（我讨厌 angularJs 顺便说一句）
暂时不行（输出为空）我已经通知仓库所有者了。