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-applymin --save-dev

Once the plugin has been installed, it may be enabled inside your Gruntfile with this line of JavaScript:

This is a project for the comprehensive solution to concat/minify/revisioning css/js files and easily replace raw css/js references in the html template, ideally support any dynamic web site written by Java/Python/Ruby/PHP etc.

The sample case is based on the simple, lightweight micro web-framework Bottle for Python. You could leverage the idea to other framework or Java/Ruby/PHP based web development.

In this case, bootstrap.css and bootstrap-responsive.css are wrapped with beginmin/endmin, which means they are planned to concat/minify/revision together.
The specified static/assets/main.lib.min.css will be the output filename.

2. When your template file is ready like above, run 'grunt' to produce minified static/assets/main.lib.min.css with the revision filename e.g. 12345678.main.lib.min.css, and grunt-applymin will update html template with this revision filename automatically, for example, change:

Because of the <!-- beginmin --><!-- endmin --> you added in the html template files, you don't have to manually set the src/dest/files paths for concat/uglify/cssmin/rev tasks, grunt-applymin will do it for you automatically.

Take a look at grunt-applymin/sample/Gruntfile.js to see how they work together with grunt-applymin.

The default value of options.staticPattern will then match this block and fetch the paths of the resources: ['static/css/bootstrap.css', 'static/css/bootstrap-responsvie.css'], this will be used to produce the output file static/assets/main.lib.min.css later, so just ensure your pattern is good enough to fetch the paths and the paths are accessable to your Gruntfile.js.

For example, in some cases, your css/js tags could contain the backend variable in it like below:

Specify the template files to beginmin target, in the sample above, grunt-applymin will search all the .tpl files in views folder recursively, and see if there are beginmin/endmin blocks to be handled. If you are using other template engine, you should change the appendix to *.jsp/*.php/*.mako, etc.

Specify the output path to store the minified css/js files. Since this is the folder to store minified files, you should make sure the name of the target filepath in html template should start with it. Otherwise, grunt-applymin will report warning. For example, in html template you write down:

<!-- beginmin: assets/main.lib.min.css -->

<!-- endmin -->

And at the same time, in the applymin:endmin target you write down:

endmin: 'static/assets'

This will lead to warning, since endmin: 'static/assets' means your minified files will be in static/assets instead of assets mentioned in html template. They are inconsistent. To make it right, change html template like this: