grunt-jstminifiedtpl v0.2.4
JST minifed template
produce JST file with minified html
Getting Started
This plugin requires Grunt ~0.4.2
If you haven't used Grunt before, be sure to check out the Getting Started guide, as it explains how to create a Gruntfile as well as install and use Grunt plugins. Once you're familiar with that process, you may install this plugin with this command:
npm install jstminifiedtpl --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-jstminifiedtpl');
The "JST minifed template" task
Overview
In your project's Gruntfile, add a section named jstminifiedtpl
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
jstminifiedtpl: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Options
options.removeComments
Type: Boolean
Default value: true
Remove comments in HTML
options.collapseWhitespace
Type: Boolean
Default value: true
Remove white space in HTML
options.removeEmptyAttributes
Type: Boolean
Default value: true
Remove empty attributes from HTML tags
options.prefix
Type: String
Default value: window.JST=
The global scope var to be used to set the minified templates in the jst file
options.wrapfunction
Type: String
Default value:
Wrap the minified template into a function, not wrapped by default
options.wrapfunctionresult
Type: String
Default value:
Wrap the entire minified template json object into a function, not wrapped by default
options.removekeyprefix
Type: String
Default value:
Basically the relative path of each file minified into JST will be used as key in the resulting object, here you can define what part of the key to remove. If your files are located at templates/foo/bar/main.html then your key in the resulting object will be templates/foo/bar/main. But lets say you want to get rid of the templates/foo/ so your key results in bar/main, then set the option to templates/foo/
options.appendJSCode
Type: String
Default value:
You can append some js code after the resulting object. If you have window.JST={"foo":"....", ...}; as your resulting object, you can add some js code after the semicolon, for example a function call like 'doSomething(window.JST);'. In this case add options.appendJSCode='doSomething(window.JST);'
Usage Examples
Default Options
In this example, the default options are used to do something with whatever. Resulting file will have window.JST having both HTML file minified. So test.js can be used to load HTML with only one js file (JST).
grunt.initConfig({
jstminifiedtpl: {
options: {},
files: {
'dest/test.js': ['src/a.html', 'src/b.html'],
},
},
});
Custom Options
In this example, custom options are used to do something else. We prefix the result with window.JST as usual, comments are removed, white space and empty attr too. HTML files in src/ and src/a will be minified and put into result object (window.JST)
grunt.initConfig({
jstminifiedtpl: {
options: {
prefix: 'window.JST',
wrapfunction: '',
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true
},
files: {
'dest/tpl.js': ['src/*.html', 'src/a/*.html'],
},
},
});
Here we use wrapfunction and appendJSCode: Each minified template/HTML will be wrapped within function myfunction, so we can do something before they are assigned to window.JST. Then we append some additional code after the window.JST object, for example to do something with the resulting window.JST.
grunt.initConfig({
jstminifiedtpl: {
options: {
prefix: 'window.JST',
wrapfunction: 'myfunction',
appendJSCode: 'doSomething(window.JST);',
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true
},
files: {
'dest/tpl.js': ['src/*.html', 'src/a/*.html'],
},
},
});
Here we use wrapfunction and appendJSCode: Each minified template/HTML will be wrapped within function myfunction, so we can do something before they are assigned to window.JST. Then we append some additional code after the window.JST object, for example to do something with the resulting window.JST. Additionally we remove src/ from the keys so our resulting object will only contain html filenames as keys.
grunt.initConfig({
jstminifiedtpl: {
options: {
prefix: 'window.JST',
wrapfunction: 'myfunction',
appendJSCode: 'doSomething(window.JST);',
removekeyprefix: 'src/'
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true
},
files: {
'dest/tpl.js': ['src/*.html', 'src/a/*.html'],
},
},
});
Here we use wrapfunctionresult and appendJSCode: Each minified template/HTML will be wrapped within function myfunction, so we can do something before they are assigned to window.JST. Then we append some additional code after the window.JST object, for example to do something with the resulting window.JST. Additionally we remove src/ from the keys so our resulting object will only contain html filenames as keys.
grunt.initConfig({
jstminifiedtpl: {
options: {
prefix: '',
wrapfunctionresult: 'myfunction',
appendJSCode: 'doSomething();',
removekeyprefix: 'src/'
removeComments: true,
collapseWhitespace: true,
removeEmptyAttributes: true
},
files: {
'dest/tpl.js': ['src/*.html', 'src/a/*.html'],
},
},
});
Contributing
In lieu of a formal styleguide, take care to maintain the existing coding style. Add unit tests for any new or changed functionality. Lint and test your code using Grunt.