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

Question

我有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...'
}

我真的不知道如何处理这个问题，以及如何从所有文件中创建这样的文本..我可以将每个单独的文件转换为字符串，但是如何将其放在对象中呢？ / p>

更新 - 10月25日，15日 - 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";

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

Answer 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日

我决定使用use gulp-file-contents-to-json，这是从文件生成JSON最简单的事情＆＃39;内容。

更新 - 2016年7月19日

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

Answer 2

您可以使用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...'
}

如果您使用templateCache，它还会生成角度angularjs生成器。

Answer 3

我刚刚为所有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包装器访问每个模板。

e.g。 Template.cart(data);返回填写了所有数据的HTML字符串。

将html模板文件合并到一个JS文件中

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

演示输出：

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

3 个答案:

用法（简单）：

更新 - 2015年8月21日

更新 - 2016年7月19日