gruntjsgrunt-usemin

Grunt usemin, filerev and load-grunt-config


Update

I have uploaded an example of the issue I am having here:

https://github.com/ianjamieson/grunt-usemin-issue

When running grunt build you will see that it generates the dist folder and inside the correct revved file, however I cannot get it to update page.html with the correct file path!

I have left the rest of the question here for reference, however, you can probably ignore it and just use the GitHub repo as an example.


I am trying to use the filerev module with usemin, but I think there maybe some issue as I am using load-grunt-config as well.

The documentation on usemin says that I should just add a revmap and set the value to:

<%= grunt.filerev.summary %>

However, this is returning undefined.

GruntFile.js

module.exports = function(grunt) {

     var config = {
         buildTasks: [
             'newer:copy', // copies the src directory to dist (htdocs)
             'requirejs', // do an r.js build to concat modular dependencies
             'fetchpages', // if there are any remote resources, fetch them here
             'concat:head', // concats js in the head
             'concat:foot', // concats js in the head
             'uglify:head', // compresses js in the head
             'uglify:foot', // compresses js in the foot
             'cssmin', // minifies and concats css
             'filerev', // changes the file name to include md5 hash and force cache refresh
             'usemin', // runs through html and inputs minified js and css
             'newer:htmlclean', // removes whitespace from html files where required
             'newer:imagemin', // minify newer images
             'clean:afterBuild' // deletes files that are not required for build
         ]
     };

    require('time-grunt')(grunt);
    require('load-grunt-config')(grunt, {
        jitGrunt: {
            staticMappings: {
                fetchpages: 'grunt-fetch-pages'
            }
        }
    });

    grunt.registerTask('build', config.buildTasks);

};

usemin.js

module.exports = function (grunt, options) {
    return {
        revmap: '<%= grunt.filerev.summary %>',
        html: [
            'path/to/page'
        ]
    };
};

filerev.js

module.exports = function(grunt, options) {
    return {
        options: {
            algorithm: 'md5',
            length: 10
        },
        js: {
            src: [
                'path/to/js.js'
            ]
        },
    };
};

I am getting the error back:

Running "usemin:revmap" (usemin) task
Verifying property usemin.revmap exists in config...OK
Files: [no src] -> revmap
Options: type="revmap"
Replaced 0 references to assets

Solution

  • I have managed to fix this, you can see a working example in the master branch here:

    https://github.com/ianjamieson/grunt-usemin-issue

    The main thing that helped was assetsDirs option in the usemin task. At first I also had a typo calling it assetDir, so make sure you include the s! Here is an example of the Gruntfile in this working project:

    module.exports = function(grunt) {
    
     grunt.initConfig({
        copy: {
          main: {
            cwd: 'src/',
            src: '**',
            dest: 'dist/',
            expand: true,
            flatten: false
          },
        },
        useminPrepare: {
            html: 'dist/templates/page/page.html',
            options: {
                dest: './dist',
                root: './dist'
            }
        },
        filerev: {
            options: {
              algorithm: 'md5',
              length: 16
            },
            js: {
              src: 'dist/resources/js/app.min.js'
            }
          },
          usemin: {
            html: 'dist/templates/page/page.html',
            options: {
                assetsDirs: ['dist']
            }
          }
      });
    
      grunt.loadNpmTasks('grunt-usemin');
      grunt.loadNpmTasks('grunt-contrib-copy');
      grunt.loadNpmTasks('grunt-contrib-uglify');
      grunt.loadNpmTasks('grunt-contrib-concat');
      grunt.loadNpmTasks('grunt-debug-task');
      grunt.loadNpmTasks('grunt-filerev');
    
        grunt.registerTask('build', [
          'copy',
          'useminPrepare',
          'concat:generated',
          'uglify:generated',
          'filerev',
          'usemin'
        ]);
    };
    

    The revved file was being search relative from the assetsDirs folder, so in this case it was dist. The file path in the HTML was resources/js/app.js. So by combining the two, it was looking at dist/resources/js/app.js