Skip to content

Instantly share code, notes, and snippets.

@spacenick
Created December 12, 2012 14:10
Show Gist options
  • Save spacenick/4267993 to your computer and use it in GitHub Desktop.
Save spacenick/4267993 to your computer and use it in GitHub Desktop.
Add live re-precompiling of handlebars templates with Yeoman/Grunt server every time you create/edit a template

In your project root:

npm install grunt-handlebars

Then edit your Gruntfile and add BEFORE the initConfig statement :

grunt.loadNpmTasks('grunt-handlebars');

Add to your Grunt config the following part

handlebars: {
    all: {
      // folder containing your *.handlebars files. I don't think that subdirectories are supported right now (not sure)
      // so just put everything in there
      src: 'app/scripts/templates',
      // javascript destination file
      dest: 'app/scripts/templates.js',
      amd:true // Will be supported if my pull rqeuest is merged.
    }
  }

More options here : https://github.com/groupdock/grunt-handlebars

Then add to the watch property the following :

watch : {
  handlebars:{
        files:'app/scripts/templates/*.handlebars',
        tasks:'handlebars reload'
      },
   // ... other stuff such as coffee or so
}

And finally run yeoman server as usual!

Now each time you will edit/create a new template, it will be detected and handlebars will re-precompile your templates!

For instance if you create main.handlebars (and obviously if you have included template.js in your project) you will be able to access your template function via Handlebars['main']

(http://handlebarsjs.com/precompilation.html)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment