Browserify transform for pre-compiled Underscore and Lo-Dash templates (with HTML minification)
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.
With npm
as a local development dependency:
npm install --save-dev jstify
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.
false
to disable HTMLMinifier
(This is useful for when your template looks like broken markup and the minifier is complaining).noMinify
.The transform is only be applied to .ejs
, .tpl
, .jst
, or .html
files.
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
.
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' }) );
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
}
});
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.
For node usage:
require('jstify/register')(/*opts*/);
opts
are the same as with browserify usage.
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;
};