如何使用 brunch.js 将多个 html 文件合并为一个答案

【问题标题】：How to merge multiple html files into one with brunch.js如何使用 brunch.js 将多个 html 文件合并为一个
【发布时间】：2015-05-19 18:50:23
【问题描述】：

我将underscore.js 用于我的模板，这些模板存储在多个单独的XXX_tpl.html 文件中，类似于：

<script type="text/x-template" id="tpl_XXX">
  <h1>hi</h1>
</script>

然后我在backbone.js 视图中使用如下：

render: function () {
    this.$el.html($('#tpl_XXX').text());
}

我现在正在使用 brunch.js 构建工具，它可以很好地将我所有的 libs/js/css 代码输出到几个优化的文件中，但是我在管理/组织我的模板时遇到了问题。如何制作 brunch.js 构建工具以将所有 *_tpl.html 文件附加到 index.html 的末尾？我在网上看到的所有示例都显示了如何使用 brunch.js 将模板合并到 .js 文件中，但我还不明白它是如何工作的（模板是 html/js 的混合，我失去了通过 ID 和将模板存储在.js 文件中时的语法格式/突出显示）。

第一季度。如果我所做的是正确的（多个不同.tpl.html 文件中的多个模板在构建时都附加在index.html 的末尾）那么我如何使build.js 合并所有这些？

第二季度。如果我做的不对，有什么更好的方法：

拥有多个组织有序且易于管理的模板
不创建额外的http请求来拉/全部编译到一个文件中
可以从backbone.js 模型轻松访问
想在我的 IDE 中为模板标记实现语法高亮（即没有 JS 字符串连接等）

【问题讨论】：

请记住，您的下划线模板确实被转换为 JS 函数。通过将它们预编译为 .js 并将其与应用程序的其余部分合并，您不必在渲染时进行该转换。要在没有 ID 访问的情况下进行这项工作，最简单的方法是按照已经建议的方式查看 require.js，或者如果您想要更轻松的解决方案，请使用 browserify ;)

标签： backbone.js underscore.js template-engine brunch

【解决方案1】：

很好的问题，但我不知道您是否理解下划线模板应该如何精确工作。让我们先把它弄清楚。

模板编译

下划线模板来源是任何带有内插代码的文本。例如：

var myTemplateString = "hello: <%= name %>";

当您想使用该模板时，您需要先将其编译成一个函数。什么？它是这样工作的：

var myTemplateFunction = _.template(myTemplateString);

这将创建一个 myTemplateFunction，其中包含您的模板逻辑。以一种非常简化的伪代码方式，您可以期望 myTemplateFunction 有点像这样工作：

function (context) { return  "hello: " + context.name };

所以，现在你明白为什么可以调用这个函数并产生一个字符串了！

myTemplateFunction({name: 'moe'}) // hello: moe

使用编译模板

好的，但是为什么需要事先编译呢？为什么不总是直接调用：

_.template(myTemplateString)({name: 'moe'})

因为编译可能会占用大量 CPU。因此，使用预编译模板要快得多。您不应该强迫用户的浏览器这样做！你应该为他做这件事！

交付编译模板

到现在为止，您知道您并不关心将函数的文本交付给您的客户，只关心编译的模板函数。有很多方法可以做到这一点。

Brunch 有一堆用于预编译模板的插件，但显然没有用于下划线的插件：http://brunch.io/plugins.html

您可以使用webpack，它是EJS template loader。

您的代码将如下所示：

var myTemplateFunction = require('./template.html')
console.log(myTemplateFunction);

您也可以使用Grunt，它是下划线模板任务：grunt-contrib-jst。

无论您选择哪个，它们的工作方式都相似：它们会将您的模板编译成一个函数，您就可以使用该函数。个人建议学习webpack！

【讨论】：