grunt-underscore-render

Renders underscore.js templates into native JavaScript functions. Allowing you to simplify rendering templates in your single page applications. It can also help to boost performance if you choose to store the template files on the CDN.

Getting Started

If you want to add this to your Grunt build strategy you can install it trough npm.

npm install grunt-underscore-render --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

grunt.loadNpmTasks('grunt-underscore-render');

Example target

underscore_render:
options: {
  'outputFile': 'templates.js',
  'globalName': 'nameOfWindowScopedVariableObject',
  'srcFiles': [
    {
    	'src':'path/to/underscoreTemplate.html',
	    'name':'nameOfVariableReference'
	}
  ]
},

Example template

<!--data-underscore-->
<h1><%=hello%></h1>
<!--/data-underscore-->

All between the HTML comments <!--data-underscore--> and <!--/data-underscore--> is being used to render the underscore template.

Example result

window.nameOfWindowScopedVariableObject=window.nameOfWindowScopedVariableObject||{};window.nameOfWindowScopedVariableObject.nameOfVariableReference=function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='\n<h1>'+
((__t=(hello))==null?'':__t)+
'</h1>\n';
}
return __p;
};