usemin not replacing revved file refrences

[skidvd]

I'm sorry for the basic question, but I have been beating my head against the wall with this problem unsuccessfully. The blocks created in my HTML are getting successfully concatenated, copied, uglified and filerev-ed. However, the block replacement is NOT being replaced with the revved version of the file.

I am using grunt: 0.4.1, grunt-filerev: 0.2.1, grunt-usemin: 2.6.2

I am following the base yoeman dir structure and the key directories of my app are as follows:

• app
  • scripts
  • styles
  • views
  • images
  • index.html
• dist

For example, my index.html has:

<!-- build:css(.) styles/vendor.css -->
    <link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css" />
    <!-- bower:css -->
    <link rel="stylesheet" href="bower_components/components-font-awesome/css/font-awesome.css" />
    <link rel="stylesheet" href="bower_components/angular-gantt/assets/angular-gantt.css" />
    <link rel="stylesheet" href="bower_components/angular-gantt/assets/angular-gantt-plugins.css" />
    <link rel="stylesheet" href="bower_components/angular-ui-tree/dist/angular-ui-tree.min.css" />
    <link rel="stylesheet" href="bower_components/nvd3/src/nv.d3.css" />
    <!-- endbower -->
    <!-- endbuild -->

These files get successfully concatenated into dist/styles/vendor.css and subsequently revved into dist/styles/vendor.62f24b9e.css as expected. However, the replacement in my index.html only gets:

<link rel="stylesheet" href="/styles/vendor.css">

as opposed to the revved version it should have:

<link rel="stylesheet" href="/styles/vendor.62f24b9e.css">

I want to rev all HTML (including partials), css, images and JS and use have these replaced globally across my project.

Similar situations are happening with the JS scripts files, images and HTML partials as well.

Here are the relevant sections from my Gruntfile (please excuse the commented out various attempts I have made to debug and/or resolve this without success):

// Renames files for browser caching purposes
        filerev: {
            dist: {
                src: [
                    '<%= yeoman.dist %>/scripts/{,*/}*.js',
                    '<%= yeoman.dist %>/styles/{,*/}*.css',
                    '<%= yeoman.dist %>/images/{,*/}*.{png,jpg,jpeg,gif,bmp,svg}',
                    '<%= yeoman.dist %>/styles/*',
                    '<%= yeoman.dist %>/fonts/*',
                    '<%= yeoman.dist %>/views/{,*/}*.html'
                    //'<%= yeoman.dist %>{,*/}*.html'

                    //'<%= yeoman.dist %>/{views,scripts,styles,images,fonts}/{,*/**/}*.{html,js,css,png,jpg,jpeg,gif,bmp,svg,otf,eot,svg,ttf,woff,woff2}'
                    //'<%= yeoman.dist %>/{views,scripts,styles,images,fonts}/{,*/**/}*'
                ]
            }
        },

// Reads HTML for usemin blocks to enable smart builds that automatically
        // concat, minify and revision files. Creates configurations in memory so
        // additional tasks can operate on them
        useminPrepare: {
            html: '<%= yeoman.app %>/index.html',
            options: {
                root: '<%= yeoman.app %>',
                dest: '<%= yeoman.dist %>',
                flow: {
                    html: {
                        steps: {
                            js: ['concat', 'uglifyjs'],
                            css: ['cssmin']
                        },
                        post: {}
                    }
                }
            }
        },

        // Performs rewrites based on filerev and the useminPrepare configuration
        usemin: {
            html: ['<%= yeoman.dist %>/{,*/}*.html'],   // html: ['<%= yeoman.dist %>/{,*/**/}*.html'],
            css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
            js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],   // js: ['<%= yeoman.dist %>/scripts/{,*/**/}*.js'],
            options: {
                //basedir: '<%= yeoman.dist %>',
                root: '<%= yeoman.app %>',
                assetsDirs: ['<%= yeoman.dist %>', '<%= yeoman.dist %>/images', '<%= yeoman.dist %>/views', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts'],
                //assetsDirs: ['<%= yeoman.dist %>'],
                patterns: {
                    html: [
                        [/(.*.html)/gm, 'Update the base HTML to reference our revved html'],
                        [/(.*views\/.*.html)/gm, 'Update the HTML to reference our revved html'],
                        [/(.*scripts\/.*.js)/gm, 'Update the HTML to reference our revved JS'],
                        [/(.*styles\/.*.css)/gm, 'Update the HTML to reference our revved CSS'],
                        [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the HTML to reference our revved images']
                    ],
                    js: [
                        [/(.*.html)/gm, 'Update the base JS to reference our revved html'],
                        [/(.*views\/.*.html)/gm, 'Update the JS to reference our revved html'],
                        [/(images\/.*?\.(?:gif|jpeg|jpg|png|webp|svg))/gm, 'Update the JS to reference our revved images']
                    ]
                }
                // For debugging purposes  ... uncomment following and runt via grunt:dist --debug
                //blockReplacements: {
                //  css: function(block) {
                //      grunt.log.debug(JSON.stringify(block.dest, null, '\t'));
                //      grunt.log.debug(JSON.stringify(block, null, '\t'));     // .filerev.summary
                //
                //      return '<link rel="stylesheet" href="'+block.dest+'"> ';
                //  },
                //  js: function(block) {
                //      grunt.log.debug(JSON.stringify(block.dest, null, '\t'));
                //      grunt.log.debug(JSON.stringify(block, null, '\t'));     // .filerev.summary
                //
                //      return '<script src="'+block.dest+'"></script>';
                //  }
                //}
            }
        },

    grunt.registerTask('build', [
        'clean:dist',
        'curl',
        'wiredep',
        'useminPrepare',
        'concurrent:dist',
        'autoprefixer',
        'concat',
        'ngAnnotate',
        'copy:dist',
        'cdnify',
        'cssmin',
        'uglify',
        'filerev',
        'usemin',
        'htmlmin'
    ]);

I will greatly appreciate any help to resolve this as I have read and reread the documentation and many google search results, but am still missing the critical ingredients to make this seemingly simple task succeed.

Thank you!

[luxueyan]

I need this too!

[stephanebachelier]

@skidvd it would be better if could share your project:

Your task configuration should be something like this (it's a working configuration):

useminPrepare: {
    html: '<%= yeoman.app %>/index.html',
    options: {
        dest: '<%= yeoman.dist %>'
    }
},
usemin: {
    html: [
        '<%= yeoman.dist %>/index.html',
        '<%= yeoman.dist %>/authentication-ko.html'
    ],
    css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
    js: ['<%= yeoman.dist %>/scripts/{,*/}*.js'],
    options: {
        assetsDirs: ['<%= yeoman.dist %>'],
        patterns: {
           /* your regexp */
        }
    }
},

By the way could you give the configuration for the cdnify ? If you remove the cdnify task does it work ?

[shauntarves]

I've run into the same issue, and it's not just a "debug request." I wanted to append a CDN path before my revved files and running them through the blockReplacements just doesn't work with the revved version replacements. With 3.1.1 at least, it seems that you can have either blockReplacement OR file revving, but not both. Any ideas?