Grunt usemin, filerev and load-grunt-config

Question

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

I think you are missing the `useminPrepare` task. Following copied from their doc `In a typical usemin setup you launch useminPrepare first, then call every optimization step you want through their generated subtask and call usemin in the end.` — Vishwanath, Apr 20 '15 at 12:13
Hi @Vishwanath, I tried adding the useminPrepare task, but with no luck — Ian Jamieson, Apr 20 '15 at 14:50

score 1 · Accepted Answer · answered Apr 27 '15 at 15:27

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

score 0 · Answer 2 · edited May 23 '17 at 10:28

0

I answered a similar question here

I'm not using usemin as I'm using requirejs to load modules so I don't want my html file to be updated with new filenames. Requirejs' map config feature is what I've used for mapping original module names to new ones.

edited May 23 '17 at 10:28

Community

1
1

answered Oct 30 '15 at 07:55

Rahul Dole

2,723
2
24
30

Grunt usemin, filerev and load-grunt-config

Update

2 Answers2