Grunt plugin for assets versioning

Question

I\'m looking for a grunt plugin that will automatically change the references to static assets (js/css) inside an html file like this:

Answer 1

I found a neat post about keeping Grunt clean, that walks through an entire folder structure, Gruntfile.js config and task running, over at http://www.jayway.com/2014/01/20/clean-grunt/. Your comment on the earlier answer is about folder structure, so it should also help with that, since the structure there doesn't have index.html file in the root either.

1. Prep your html file as per the docs of grunt-usemin (and/or the post I linked)
2. You need to add grunt-contrib-copy, so you can copy index_src.html and rename it to index.html (used this for inspiration), and proceed with the 'usemin' task on that.
3. Change references to your assets to relative paths (ex. ../js/controller.js)

4. Then configure your Gruntfile.js like this:

   [...]
   useminPrepare: {
       html: 'templates/index.html',
       options: {
           dest: 'js'
       }
   },
   
   // Concat - best to implement it this way for useminPrepare to inject the config
   concat: {
       options: {
           separator: ';'
       },
       // dist configuration is provided by useminPrepare
       dist: {}
   },
   
   // Uglify - best to implement it this way for useminPrepare to inject the config
   uglify: {
       // dist configuration is provided by useminPrepare
       dist: {}
   },
   
   filerev: {
       options: {
           encoding: 'utf8',
           algorithm: 'md5',
           length: 20
       },
       source: {
           files: [{
               src: [
                   'js/**/*.js'
               ]
           }]
       }
   },
   
   copy: {
     rename: {
       files: [
         {
           cwd: 'templates',
           src: ['**/index_src.html'],
           dest: 'templates',
           rename: function(dest, src) {
             return dest + src.replace(/_src\.html$/i, '.html');
           }
         }
       ]
     }
   },
   
   // usemin has access to the revved files mapping through grunt.filerev.summary
   usemin: {
       html: ['templates/index.html'],
       options: {
           assetsDirs: ['js']
       }
   } [...]
   

   I'm not a 100% sure about the regex to rename the file, but make a backup of the folder and give it a try. Also, I'm answering as per the pastebin link you gave, which did not include any css files. If there are any, things get a bit complicated, so let me know.

5. You could then use the grunt task Bixi suggested, but include your copy step (and concat & uglify)

   grunt.registerTask('build', 'Build task, does everything', [
   'useminPrepare',
   'concat',
   'uglify',
   'copy:rename',
   'filerev',
   'usemin'
   ]);