Precompiling Handlebars Templates with Grunt
Assuming you have Node.js installed. If you don't, go do that.
1) Setting up Node dependencies:
In your applications root directory add a file named package.json. Paste the following into that file:
{
"devDependencies": {
"grunt-contrib-handlebars": "~0.6.0",
"grunt-contrib-watch": "~0.5.3",
"handlebars": "~1.3.0"
},
}
This JSON file tells Node what packages it needs to install. This helps to get other developers get up-and-running very quickly, as you'll see in the next step.
2) Installing Node Dependencies:
In your terminal/command prompt/powershell, cd into your projects root directory and run the following commands:
npm install grunt -g
npm install grunt-cli -g
And to install the dependencies listed in your package.json:
npm install
Now you've installed all of the node dependencies that you need. In your projects root directory, you'll see a node_modules folder.
3) Configuring Grunt:
In your projects root directory, create a file named Gruntfile.js. Paste the following into that file:
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) Configuring to Your Liking:
If you are not using Require.js, you'll want to change handlebars.compile.options.amd to false. You may also want to tweak the namespace option to your liking. If you're using require/amd modules, the namespace property is unimportant (it's default is "JST", if you remove it).
Because all project structures are a little bit different, you'll need to configure the Gruntfile just a little bit. Modify the constants TEMPLATES_LOCATION, TEMPLATES_EXTENSION, TEMPLATES_OUTPUT_LOCATION, TEMPLATES_OUTPUT_FILENAME to fit your project.
If your templates are scattered throughout your application, you'll want to change TEMPLATES_LOCATION to the lowest directory possible. Make sure your templates are isolated from your node_modules, bower_components or any other 3rd party directories, because you don't want Grunt to compile 3rd Party templates into your applications compiled templates. If you include all of your own code in a ./src, ./js, ./app directory, you'll be okay.
5) Compiling templates with Grunt:
To run grunt in the background, open your terminal and cd into your projects root directory and run the command: grunt watch:handlebars (just grunt watch works as well). With grunt running in the background, all changes to your template files will be automatically compiled and the output file specified handlebars.compile.dest will be rewritten as needed. The output will look something like this:
Running "watch" task
Waiting...
To run the compile task alone, open your terminal and cd into your projects root directory and run the command: grunt handlebars:compile (just grunt:handlebars works as well). The output will look something like:
Running "handlebars:compile" <handlebars> task
File "./src/templates/compiled_templates.js" created.
Done, without errors.
