Use build blocks to update the references in your html and perform file concatenation, minification, and cache busting.
+---------------------------------------------+| || Current version is Grunt 0.4.0 compatible. || Version 0.0.12+ is Grunt 0.4.0 compatible. || || Version 0.0.11 is Grunt 0.3.17 compatible. || |+---------------------------------------------+
Use build blocks to do three things:
Utilize build blocks in your html to indicate the files to be concatenated and minified. This task will parse the build
blocks by updating the
<style> blocks in your html, and it will schedule the concatenation and
minification of the desired files by dynamically updating the
cssmin (part of
grunt-css - this is
auto included as a dependency for
This task modifies files, so it should be executed on a temp directory or the final build directory.
This task relies on the concat, uglify, and cssmin tasks to be run after it... concat first.
Here is a sample repo that uses
Example usage with grunt.init:
useref:// specify which files contain the build blockshtml: 'output/**/*.html'// explicitly specify the temp directory you are working in// this is the the base of your links ( "/" )temp: 'output'
Below are example corresponding build blocks in an example referenced html file. Multiple build blocks may be used in a single file. The grunt templating engine can be used in the build file descriptions. The data passed to the template processing is the entire config object.
in an html file within the
<!-- build:css /css/combined.css --><!-- endbuild --><!-- build:js scripts/combined.<%= grunt.file.readJSON('package.json').version %>.concat.min.js --><!-- You can put comments in here too --><!-- endbuild --><!-- build:js scripts/script1.<%= grunt.template.today('yyyy-mm-dd') %>.min.js --><!-- endbuild -->
You can put comments and empty lines within build blocks.
0.1.0 after the bump, and it is October 31, 2012 running
grunt useref would
create the following three files:
# concat and minified one.css + two.cssoutput/css/combined.css# concat and minified this.js + that.jsoutput/scripts/combined.0.1.0.concat.min.js# minified script1.jsoutput/scripts/script1.2012-10-31.min.js
Also the html in the file with the build blocks would be updated to:
Finally, make sure to schedule
cssmin in your
grunt.js. You must schedule these after
You do not need to create
grunt.init entries for them. If the build blocks do not create work for any one of these
tasks, you can leave that one out.
Or, if you are do not have any css build blocks:
To use this package put it as a dependency in your
package.json, and then run
Then load the grunt task in your
If you use
grunt-useref you can ommit using
loadNpmTask for the following plugins:
grunt-useref will load the above plugins for you.
Currently there are no autmated tests, but the
test directory does have a working sample setup. To try out the sample
run it from the
grunt-useref directory using:
npm installnpm test
You can inspect the sample output created. The tests can be run by either cloning the git repo or from this module's
directory inside the
node_modules folder of your project.