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

Question

我正在使用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的混合，我丢失了两个在.js文件中存储模板时，通过ID和语法格式化/突出显示进行访问。

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

Q2。如果我正在做的不对，那么更好的方法是：

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

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