davis/jstify

Browserify transform for pre-compiled Underscore and Lo-Dash templates (with HTML minification)

jstify

jstify is a Browserify transform for creating modules of pre-compiled Underscore and Lo-Dash templates that also minifies the template's HTML using HTMLMinifer 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 module name of the library to use for template compilation. It will also be the value used for the var _ = require([engine]); in the template output. The default value is underscore, but may be set to lodash.
• noMinify (optional): Whether to use HTMLMinifer or not. Defaults to false. This is useful for when your template looks like broken markup and the minifier is complaining.
• withImports (optional): Whether to simulate Lo-Dash's _.templateSettings.imports in the compiled template. Defaults to false.
• templateOpts (optional): The options to pass to the compilation library. By default this is empty, so check Underscore's template docs or Lo-Dash's template docs for their respective defaults and options.
• minifierOpts (optional): The options to pass to HTMLMinifer. By default, removeComments and collapseWhitespace are set to true, everything else is false. See the HTMLMinifier options docs for more info.

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

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.

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;
};