Grunt task for compiling doT templates


Compiles doT templates ready for RequireJS

Install this grunt plugin next to your project's grunt.js gruntfile with: npm install grunt-dot-compiler

Then add this line to your project's grunt.js gruntfile:


given the following config and template

  dot: {
    dist: {
      options: {
        variable : 'tmpl',
        root     : __dirname + '/app/profiles'
      src  : ['app/**/*.dot'],
      dest : 'app/public/templates/tmpl.js'
  • variable String Variable to store everything
  • root String Root of the project
  • requirejs Boolean Enable RequireJS
  • node Boolean Enable Node

will output the following script file

if( typeof define !== "function" ) {
  define = require( "amdefine" )( module )
define(function() {
  var tmpl=tmpl|| {};
  tmpl['item']=function anonymous(it) {
    var out='<li><a href="'+(it.url)+'"></a></li>';return out;
  return tmpl;

You can load partials with the load command

  {{##def.partial1: load('./partial1.part') #}} // Use relative paths 
  {{##def.partial2: load('test/example/partial2.part') #}} // Use options.root 

Have you ever wondered if you can set customize CSS classes in partials without doing it right in a Javascript file, instead doing right on the template?

With version 0.4 you can set in-template-vars. Which means, when you load a partial you can set specific variables right in the template.

Define in-template-vars with the following syntax:


For instance, in test.part:

<div class="{{$ some:some-var }}"></div>

Load the partial now in

{{##def.customPartial: load('./test.part', { some : 'some-css-class'}) #}}

And the output will be:

<div class="some-css-class"></div>

You can now create partials in partials and Grunt-dot-compiler will do the mgic for you.

Copyright (c) 2012 Tingan Ho Licensed under the MIT license.