使用 Grunt 预编译 Handlebars 模板
假设您安装了 Node.js。如果你不这样做，那就去做吧。
1) 设置Node依赖：
在您的应用程序根目录中添加一个名为package.json 的文件。将以下内容粘贴到该文件中：
{
"devDependencies": {
"grunt-contrib-handlebars": "~0.6.0",
"grunt-contrib-watch": "~0.5.3",
"handlebars": "~1.3.0"
},
}
这个 JSON 文件告诉 Node 它需要安装哪些包。正如您将在下一步中看到的那样，这有助于让其他开发人员快速启动并运行。
2) 安装节点依赖：
在您的终端/命令提示符/powershell 中，cd 进入您的项目根目录并运行以下命令：
npm install grunt -g
npm install grunt-cli -g
并安装 package.json 中列出的依赖项：
npm install
现在您已经安装了所有需要的节点依赖项。在您的项目根目录中，您会看到一个node_modules folder。
3) 配置 Grunt：
在您的项目根目录中，创建一个名为Gruntfile.js 的文件。将以下内容粘贴到该文件中：
module.exports = function(grunt) {
var TEMPLATES_LOCATION = "./src/templates/", // don't forget the trailing /
TEMPLATES_EXTENSION = ".hbs",
TEMPLATES_OUTPUT_LOCATION = TEMPLATES_LOCATION, // don't forget the trailing /
TEMPLATES_OUTPUT_FILENAME = "compiled_templates.js"; // don't forget the .js
grunt.initConfig({
watch: {
handlebars: {
files: [TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION],
tasks: ['handlebars:compile']
}
},
handlebars: {
compile: {
src: TEMPLATES_LOCATION + '**/*' + TEMPLATES_EXTENSION,
dest: TEMPLATES_OUTPUT_LOCATION + TEMPLATES_OUTPUT_FILENAME,
options: {
amd: true,
namespace: "templates"
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-handlebars');
grunt.loadNpmTasks('grunt-contrib-watch');
}
4) 根据自己的喜好进行配置：
如果您不使用 Require.js，您需要将 handlebars.compile.options.amd 更改为 false。您可能还想根据自己的喜好调整namespace 选项。如果您使用的是 require/amd 模块，则命名空间属性并不重要（如果您将其删除，则默认为“JST”）。
因为所有项目结构都有些不同，所以您只需稍微配置一下 Gruntfile。修改常量TEMPLATES_LOCATION、TEMPLATES_EXTENSION、TEMPLATES_OUTPUT_LOCATION、TEMPLATES_OUTPUT_FILENAME 以适合您的项目。
如果您的模板分散在整个应用程序中，您需要将TEMPLATES_LOCATION 更改为可能的最低目录。确保您的模板与您的 node_modules、bower_components 或任何其他 3rd 方目录隔离，因为您不希望 Grunt 将 3rd 方模板编译到您的应用程序编译的模板中。如果您将自己的所有代码都包含在 ./src、./js、./app 目录中，就可以了。
5) 使用 Grunt 编译模板：
要在后台运行 grunt，打开你的终端并 cd 进入你的项目根目录并运行命令：grunt watch:handlebars（grunt watch 也可以）。随着 grunt 在后台运行，对模板文件的所有更改都将自动编译，并且指定的输出文件 handlebars.compile.dest 将根据需要重写。输出将如下所示：
Running "watch" task
Waiting...
要单独运行编译任务，打开你的终端和cd到你的项目根目录并运行命令：grunt handlebars:compile（grunt:handlebars也可以）。输出将类似于：
Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.
Done, without errors.