grunt-indexify v0.2.3
grunt-indexify
Use build blocks to replace scripts and stylesheets references to their optimized versions.
Getting Started
This plugin requires Grunt ~0.4.5
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 grunt-indexify --save-dev
Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:
grunt.loadNpmTasks('grunt-indexify');
The "indexify" task
- Replace the references of scripts and stylesheets within HTML files dynamically to their minified versions.
- Minify (uglify) the js-files if necessary. Minified files is stored in a temporary folder. If a file is already minified it wont minify it again. This way you can mix minified and unminified js-files in your HTML markup.
- Concat the files in the order they appear in the HTML markup to a minified version defined in the build block.
- Delete the temporary folder.
Dependencies
indexify
use the following plugins to optimize files:
To install these plugins, run:
npm install grunt-contrib-uglify grunt-contrib-concat grunt-contrib-cssmin --save-dev
Overview
In your project's Gruntfile, add a section named indexify
to the data object passed into grunt.initConfig()
.
grunt.initConfig({
indexify: {
options: {
// Task-specific options go here.
},
your_target: {
// Target-specific file lists and/or options go here.
},
},
});
Blocks
Define build blocks in your HTML markup to indicate which files to be minified and concatenated.
To accomplish this indexify
dynamically updates the configuration of concat
, uglify
, and cssmin
.
Multiple build blocks may be used in a single file.
Blocks are expressed as:
<!-- build:<type> <path> -->
... HTML Markup, list of scripts/stylesheets.
<!-- endbuild -->
- type: can be
js
orcss
- path: the file path of the optimized file, the target output
Usage Example
The following example will replace the defined build block in src/index.html
to <script src="js/script.min.js"></script>
in the destination file dist/index.html
.
Then it will uglify (if necessary) and concat the js-files and save an optimized version to dist/js/script.min.js
.
In grunt.js
grunt.initConfig({
indexify: {
files: {
src: ['src/index.html'],
dest: 'dist/index.html'
}
},
});
In src/index.html
<!-- build:js js/script.min.js -->
<script src="js/script.js"></script>
<script src="js/another-script.js"></script>
<script src="js/vendor/script.js"></script>
<script src="js/vendor/another-script.js"></script>
<!-- endbuild -->
Desired output in dist/index.html
<script src="js/script.min.js"></script>
Options
minSuffix
Type: string
Default: .min
If the filename has this suffix it won't be minified. e.g. jquery.min.js
.
minifyExceptions
Type: array
Default: []
An array with filenames that won't be be minified.
root
Type: string
Default: ''
The root directory from which your files will be resolved. e.g. this is useful if you load your content on a different level with AJAX and the src of the files will be incorrect.
tmpFolder
Type: string
Default: indexify-tmp/
The location where indexify
temporary stores the minified files before concatenating.
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.
Release History
- 0.1.0 - First release.
- 0.2.0 - Added uglify, concat and cssmin functionality.
- 0.2.1 - Bug fixes: Files with the same destination is only optimized once now. The
root
option now works as intended. - 0.2.2 - Minor bug fixes.
- 0.2.3 - Compatible with Node v6. Error "Warning: Path must be a string..." solved.