grunt-usemin

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, install this plugin with this command:

usemin is composed of 2 different tasks (useminPrepare and usemin) that are part of the same workflow:

useminPrepare: detects special construction (blocks) in the HTML files and update the grunt config to run concat/uglify/cssmin/requirejs on the files referenced in the block. It does not changes the HTML files it is working on.

usemin: in the HTML and CSS files it treats, it replaces the blocks by a reference to a single file, as well as all references to images, scripts, CSS files, by their minified/revved/.. version if it is found on the disk. As such this target rewrites the HTML and CSS files it is working on.

Usually, useminPrepare is launched first, then the concat, uglify, cssmin and requirejs tasks are launched (they will created the minified/revved version of the referenced files), and then, in the end usemin is launched.

Internally, the task parses your HTML markup to find each of these blocks, and initializes for you the corresponding Grunt config for the concat / uglify tasks when type=js, the concat / cssmin tasks when type=css.

The task also handles use of RequireJS, for the scenario where you specify the main entry point for your application using the "data-main" attribute as follows:

<!-- build:js js/app.min.js -->

<scriptdata-main="js/main"src="js/vendor/require.js"></script>

<!---->

One doesn't need to specify a concat/uglify/cssmin or RequireJS configuration anymore.

It is using only one target: html, with a list of the concerned files. For example, in your Gruntfile.js:

Change the basedir that represent the location of the transformed file. For example, let's imagine you have someting like:

|

+--- styles

\ main.css

+--- views

\ index.html

By default, if the file to be transformed is index.html, the images, scripts, ... referenced by this file will be considered are being in the views directory, whereas they must be linked to the styles directory.