Yesterday, I released the first version of guard-templates, my Guard plugin for compiling Javascript templates as you work. Guard is a nifty tool for watching a directory for changes and taking some kind of action upon the changed files - running tests, compiling SASS or Coffeescript, firing a Growl and about a billion other things.

The idea behind guard-templates is pretty simple: let your JS templates live in their own files in your project’s source tree and have Guard turn them into Javascript you can use, as soon as you save them. Some frameworks have mechanisms for this already (Rails’s Asset Pipeline, for example), but I wanted something I could drop into any project regardless of the technology being used. Let’s say you had the following Handlebars template:

<div>{{example}}</div>

With guard-templates configured to watch .handlebars files, it’ll automatically compile to a simple JS string version of the file, ready to be included in the brower:

MyApp.templates = {
  post: '<div>{{example}}</div>'
}

Bam, ready to use JS templating without gross inline string literals or Ajax requiring. But wait, there’s more! My favorite JS templating language is Jade, a HAML-ish language that supports precompilation to JS functions to avoid parsing the template itself at runtime.

ul
  li.first
    a(href='#') foo

After processing, this becomes a ready-to-call function:

MyApp.templates = {
  post: function anonymous(locals, attrs, escape, rethrow) {
    // contents tuncated for brevity's sake
  }
}

More options and details on usage are documented over on the project’s GitHub page. Drop me a line if it’s useful for you or if something’s broken.