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

1. Replace the references of scripts and stylesheets within HTML files dynamically to their minified versions.
2. 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.
3. Concat the files in the order they appear in the HTML markup to a minified version defined in the build block.
4. Delete the temporary folder.

Dependencies

indexify use the following plugins to optimize files:

• concat - concatenates files.
• uglify - minifies JS files.
• cssmin - minifies CSS 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 or css
• 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.