Grunt - time-stamped asset compression and inclusion

Question

I spent the whole day trying to figure out how to get started with Grunt, but all the documentation I could find (on GitHub) indicates the options and nothing else.

I am looking for more convenient documentation / instructions since I am new to Grunt.

I would like to automate the miniaturization process of several .css files and include them inside my template in a placeholder defined as

<!-- styles --> <!-- /styles --> 

and

 <!-- js --> <!-- /js --> 

What Grunt should do:

• take a look inside my css directory
• compress files in one application "main.css" and "main.js"
• open the html template (it would be great if it did not require the tmp version, but could update the same html file instead) and write the <link> and <script> that refer to the created file that adds the time stamp ( to iterate over the cache)

It seems to me that this is a general approach, but I can not find anything ready there.

I looked at "grunt-contrib-cssmin", "cartero", "grunt-includes", "grunt-include-replace", "grunt-usemin" and tons of alternatives ... but nobody seems to integrate everything and I can't make them work togheter to get what i want.

Answer 1

You are on the right way. grunt-usemin will handle most of what you are looking for, but it requires other packages. To get a CSS / JS thumbnail, you need to use the grunt-contrib-cssmin combo (for CSS), grunt-contrib -uglify (for JS) combos, and while we are breaking through the cool grunt packages, I would recommend using grunt-rev to break the cache .

For your scripts to work as intended, open the useminPrepare task . This will allow you to wrap your CSS and JS files and then run tasks with them. For example, my project uses a bunch of positive effects from Bower, so I have the following in my footer.html:

  <!-- build:js js/scripts.min.js --> <script src="./bower_components/zepto/zepto.js"></script> <script src="./bower_components/underscore/underscore-min.js"></script> <script src="./bower_components/eventEmitter/EventEmitter.js"></script> <script src="./bower_components/eventie/eventie.js"></script> <script src="./bower_components/imagesloaded/imagesloaded.js"></script> <script src="./bower_components/spin.js/spin.js"></script> <script src="./scripts/lib/zepto.touch.module.js"></script> <!-- endbuild --> 

When launched, useminPrepare will "collect" all of this and create a configuration object that can then be used to compress / minimize. My task looks like this:

 grunt.registerTask('produce',[ 'clean:main', // clean out the /dist directory if it exists 'copy', // copy files to /dist 'useminPrepare', // prepare an object of files that will be passed to concat and/or uglify 'concat', // concatenate assets 'uglify', // minify assets 'usemin', // use the minified version of these files in my html 'compass:produce', // run production version of compass 'clean:post' // cleanup junk ]); 

If you really wanted to use timestamps, you could add it to the <!-- build --> comment, but I'm not quite sure if it works (I have not tested). One of the accompanying Yoman / Grint-Usemin, Addi Osmani, only recommends using grunt-rev: https://github.com/yeoman/grunt-usemin/issues/104 .

As for the last marker point, I would suggest that you want to create a tmp file, otherwise you will break the editing of the underlying HTML. If this is what you want to do, I bet you can, but I highly recommend not to.