P.S: This is a minimalist usage of grunt-usemin, do read the usemin README for more details.

The directory structure looks like:

1 2 3 4 5 6 7 8 9 10 . ├── assets │ ├── css │ │ └── style.css │ └── js │ ├── bar.js │ └── foo.js ├── gruntfile.js ├── index.html └── package.json

Where style.css includes bare minimal CSS and bar.js and foo.js are simple javascript files.

The index.html looks like:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE html> <html> <head> <title> Usemin test </title> <!-- build:css assets/css/style.min.css --> <link rel= "stylesheet" type= "text/css" href= "./assets/css/styles.css" media= "screen" /> <!-- endbuild --> </head> <body> </body> <!-- build:js assets/js/optimized.js --> <script src= "./assets/js/foo.js" ></script> <script src= "./assets/js/bar.js" ></script> <!-- endbuild --> </html>

On Grunting:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 $ grunt Running "copy:html" ( copy ) task Copied 1 file Running "useminPrepare:html" ( useminPrepare ) task Going through index.html to update the config Looking for build script HTML comment blocks Configuration is now: concat: { generated: { files: [ { dest: '.tmp/concat/assets/css/style.min.css' , src: [ 'assets/css/style.css' ] } , { dest: '.tmp/concat/assets/js/optimized.js' , src: [ 'assets/js/foo.js' , 'assets/js/bar.js' ] } ] } } uglify: { generated: { files: [ { dest: 'dist/assets/js/optimized.js' , src: [ '.tmp/concat/assets/js/optimized.js' ] } ] } } cssmin: { generated: { files: [ { dest: 'dist/assets/css/style.min.css' , src: [ '.tmp/concat/assets/css/style.min.css' ] } ] } } Running "concat:generated" ( concat ) task File ".tmp/concat/assets/css/style.min.css" created. File ".tmp/concat/assets/js/optimized.js" created. Running "uglify:generated" ( uglify ) task File dist/assets/js/optimized.js created: 75 B → 58 B Running "cssmin:generated" ( cssmin ) task File dist/assets/css/style.min.css created: 48 B → 39 B Running "usemin:html" ( usemin ) task Processing as HTML - dist/index.html Update the HTML to reference our concat/min/revved script files Update the HTML with the new css filenames Update the HTML with the new img filenames Update the HTML with data-main tags Update the HTML with data-* tags Update the HTML with background imgs, case there is some inline style Update the HTML with anchors images Update the HTML with reference in input Done, without errors.

Do notice that default task:

1 2 3 4 5 6 7 8 grunt.registerTask ( 'default' , [ 'copy:html' , 'useminPrepare' , 'concat' , 'uglify' , 'cssmin' , 'usemin' ]) ;

The new dir structure will be:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 . ├── assets │ ├── css │ │ └── style.css │ └── js │ ├── bar.js │ └── foo.js ├── dist │ ├── assets │ │ ├── css │ │ │ └── style.min.css │ │ └── js │ │ └── optimized.js │ └── index.html ├── gruntfile.js ├── index.html

dist/index.html would now look like:

1 2 3 4 5 6 7 8 9 10 11 <!DOCTYPE html> <html> <head> <title> Usemin Example </title> <link rel= "stylesheet" href= "assets/css/style.min.css" media= "screen" /> </head> <body> </body> <script src= "assets/js/optimized.js" ></script> </html>

css is minifed and js is concated and minifed. Have a look the dist dir.

Hope this helped you to get started with usemin!