jstify

jstify is a Browserify transform for creating modules of pre-compiled Underscore templates. It allows setting the name of the _ module in the template output for use with lodash. Also minifies the template's HTML using HTMLMinifier before compilation.

Installation

With npm as a local development dependency:

npm install --save-dev jstify

Configuration

jstify can take a configuration object with any of the following:

• engine (optional): The value used for var _ = require([engine]); in the template output. The default value is underscore, but may be set to lodash for example. Set it to lodash-micro to only include lodash.escape as a runtime dependency. Set it to global if using a CDN or a separate bundle that exposes the engine required as a global.
• withImports (optional): Whether to simulate Lo-Dash's _.templateSettings.imports in the compiled template. Defaults to false.
• templateOpts (optional): The options to pass to _.template. By default this is empty, check Underscore's template docs for more options.
• minifierOpts (optional): The options to pass to HTMLMinifer. By default, removeComments, collapseWhitespace and conservativeCollapse are set to true, everything else is false. See the HTMLMinifier options docs for more info.
  • Set to false to disable HTMLMinifier (This is useful for when your template looks like broken markup and the minifier is complaining).
  • Alternatively, you can set noMinify.

The transform is only be applied to .ejs, .tpl, .jst, or .html files.

Usage of engine=lodash-micro

When file size of the compiled template is critical use lodash-micro configuration for engine. As lodash.escape is the only runtime dependency, this reduces the minified file size to less than 1kb. This should only be used when the template is not using any underscore or lodash functions inline like _.each.

Usage

In templates/main.tpl:

<p>I like <%= noun %></p>

In example/main.js:

var template = require('templates/main.tpl');
$('#main').html( template({ noun: 'red bull' }) );

Transforming with the api

var browserify = require('browserify');
var fs = require('fs');
var b = browserify('example/main.js');
b.transform('jstify')
b.bundle().pipe(fs.createWriteStream('bundle.js'));

Setting the engine to lodash:

b.transform('jstify', { engine: 'lodash' })

Setting a mustache style interpolator, turning off comment removal and turning on redundant attribute removal:

b.transform('jstify', {
    templateOpts: {
        interpolate: /\{\{(.+?)\}\}/g
    },
    minifierOpts: {
        removeComments: false,
        removeRedundantAttributes: true
    }
});

Transforming with the command-line

browserify example/main.js -t jstify > bundle.js

Setting the engine to lodash:

browserify example/main.js -t [ jstify --engine lodash ] > bundle.js

Turning off comment removal:

browserify example/main.js -t [ jstify --minifierOpts [ --collapseWhitespace 0 ] ] > bundle.js

Command-line caveat: Setting options in templateOpts that require a RegExp does not work.

Transforming with the require hook

For node usage:

require('jstify/register')(/*opts*/);

opts are the same as with browserify usage.

Transformed Samples

Template source:

  <div>
    <p><%= "i like red bull" %></p>
      </div>


<div>
  i also like cat gifs
</div>

Compiled without HTML minification:

var _ = require('underscore');
module.exports = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<div>\n    <p>'+
((__t=( "i like red bull" ))==null?'':__t)+
'</p>\n        </div>\n\n<div>\n  i also like cat gifs\n</div>';
}
return __p;
};

Compiled with HTML minification:

var _ = require('underscore');
module.exports = function(obj){
var __t,__p='',__j=Array.prototype.join,print=function(){__p+=__j.call(arguments,'');};
with(obj||{}){
__p+='<div><p>'+
((__t=( "i like red bull" ))==null?'':__t)+
'</p></div><div>i also like cat gifs</div>';
}
return __p;
};