Grunt task replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).
Replaces references to non-optimized scripts or stylesheets into a set of HTML files (or any templates/views).
Watch out, this task is designed for Grunt 0.4 and upwards.
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:
npm install grunt-usemin --save-dev
usemin is composed of 2 different tasks (
usemin) that are part of the same workflow:
gruntconfig to run
requirejson the files referenced in the block. It does not changes the HTML files it is working on.
useminPrepare is launched first, then the
requirejs tasks are launched (they will created the minified/revved version of the referenced files), and then, in the end
usemin is launched.
A special task which uses the build block HTML comments in markup to get back the list of files to handle, and initialize the grunt configuration appropriately, and automatically.
Custom HTML "block" comments are provided as an API for interacting with the build script. These comments adhere to the following pattern:
<!-- build:<type>(alternate search path) <path> -->... HTML Markup, list of script / link tags.<!-- endbuild -->
An example of this in completed form can be seen below:
<!-- build:js js/app.js --><!-- endbuild -->
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
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 --><!-- -->
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
Type: 'string' Default: 'uglify'
Type: 'string' Default: 'cssmin'
Name of the tool used to minify the CSS.
Type: 'string' Default: nil
Base directory where the transformed files should be output.
This task is responsible for replacing in HTML and CSS files, references to non-minified files with reference to their minified/revved version if they are found on the disk.
usemin:html: '**/*.html'css: '**/*.css'options:dirs: 'temp' 'dist'
Type: 'array of strings' Default: nil
Used to limit the directories that will be looked for revved files when replacing reference. By default all subdirectories are looked at.
Type: 'string' Default: nil
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
BSD license and copyright Google