Precompiling Handlebars templates using Yeoman and Ember

A regular question we are asked is 'How do I precompile Handlebar templates using Yeoman?'. Some of our generators include support for a templates directory and if you wish to precompile templates for Ember.js applications, the following guide should help.

Note: Users wishing to use one of our other generators with Handlebar precompilation as a part of their build may be interested in our related Handlebars Integration guide which uses grunt-contrib-handlebars.

Let's begin by scaffolding out a brand new Ember.js application.

yeoman init ember

Next..

npm install grunt-ember-templates # https://github.com/dgeb/grunt-ember-templates

Then in the Gruntfile.js that you should have at the root of your project add this:

module.exports = function( grunt ) {
  'use strict';

  grunt.loadNpmTasks('grunt-ember-templates'); // <- this

Then configure the ember_templates task:

  grunt.initConfig({

    // Project configuration
    // ---------------------

    ember_templates: {
      compile:{
        options: {
          templateName: function(sourceFile){
            return sourceFile.replace(/path\/to\//, '');
          }
        },
        files: {
          'result.js' : ['app/scripts/templates/**/*.handlebars'],
        }
      }
    },

Finally, "handlebars" task needs to be registered in Gruntfile.js: ...

  // Alias the `test` task to run the `mocha` task instead
  grunt.registerTask('test', 'server:phantom mocha');

  // Define the `handlebars` task.
  grunt.registerTask('handlebars', ['ember_templates']);
};

With that, you can run the command yeoman ember_templates, it will compile your templates, and put them in the app/scripts/templates folder.

Example:

$  ls app/scripts/templates
application.handlebars forms.handlebars
$  yeoman ember_templates
Running "ember_templates:compile" (ember_templates) task
File "result.js" created.

Done, without errors.
$  ls app/scripts/templates
application.handlebars application.js         forms.handlebars       forms.js

Then you can load the compiled templates in your html file like normal js files:

  <script src="scripts/templates/application.js"></script>
  <script src="scripts/templates/forms.js"></script>

You can also enable auto-reload by adding this in your Gruntfile:

watch: {
  ember_templates: {
    files: 'app/scripts/**/*.handlebars',
    tasks: 'ember_templates livereload'
  },
}

and that's it!