grunt-usemin not replacing reference block with revved file line

问题

I've been having an issue with grunt-usemin where it doesn't replace the non-revved reference block with the single revved line. The two files in the reference block get concatenated and uglified just fine; the single file metadata.min.js also gets versioned just fine; but, the reference to the revved file doesn't get inserted in to index.html. Just the non-revved line.

I'm using:

grunt-usemin 2.6.0
grunt-filerev 2.1.1
the Zend Framework for templating (hence the bizarre template paths)

Here's the index.html reference block before running grunt build:

<!-- build:js js/dest/metadata.min.js -->
<script src="js/metadata/MetadataController.js"></script>
<script src="js/metadata/MetadataService.js"></script>
<!-- endbuild -->

Here's the relevant Grunt config:

useminPrepare: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    dest: 'dist',
    root: '.'
  }
},

filerev: {
  options: {
    encoding: 'utf8',
    algorithm: 'md5',
    length: 8
  },
  js: {
    src: ['dist/js/dest/*.js'],
    dest: 'js/dest/rev/test'
  }
},

usemin: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    assetsDirs: ['js/dest/rev/test']
  }
},

grunt.registerTask('build' ['useminPrepare','concat:generated','uglify:generated','filerev','usemin']);

Here's the index.html after running grunt build:

<script src="js/dest/metadata.min.js"></script>

Any reason why the revved line shouldn't look like this?

<script src="js/dest/metadata.min.a5851d60.js"></script>

Is this a bug with grunt-usemin? Is a config off somewhere? Though not really answered, this is similar to: Usemin not replacing reference blocks in HTML

Been beating my head against the desk for awhile. Any insight is greatly appreciated.

回答1:

Try running grunt --debug with the following usemin configuration for some more information:

usemin: {
  html: '../cdm_common/cdm/layouts/scripts/index.html',
  options: {
    assetsDirs: ['js/dest/rev/test'],
    blockReplacements: {
        js: function (block) {
            grunt.log.debug(JSON.stringify(block.dest));
            grunt.log.debug(JSON.stringify(grunt.filerev.summary));

            return '<script src="'+block.dest+'"></script>';
        }
    }
  }
}

This will echo the current block its generating and an object with the files modified by filerev.

In my case I had an extra "public/" folder so my string would not match the key in the object, and therefor usemin was unable to find the new location made by filerev:

[D] "js/build/vendors.js"
[D] "public\\js\\build\\vendors.js": "public\\js\\build\\vendors.4e02ac3d2e56a0666608.js", "public\\js\\build\\main.js": "public\\js\\build\\main.acd1b38e56d54a170d6d.js"}

Eventually I fixed this with this custom blockReplacements function, (i.e. replacing public/ and the obnoxious Windows path):

js: function (block) {
    var arr = {};
    for (var key in grunt.filerev.summary) {
        arr[key.replace(/\\/g, "/").replace(/\/\//g, "/").replace("public/", "")] = grunt.filerev.summary[key].replace(/\\/g, "/");
    }

    var path = (arr[block.dest] !== undefined) ? arr[block.dest] : block.dest;

    return '<script src="{{ asset(\''+Twig.basePath + path +'\') }}"></script>';
},

回答2:

This occurred to me as well and the issue was caused by not having the correct assetDirs in the usemin block. You will want to make sure your assetDirs array contains the parent folder of your revved file.

assetDirs documentation

This is the list of directories where we should start to look for revved version of the assets referenced in the currently looked at file.

usemin: {
    html: 'build/index.html',
    options: {
        assetsDirs: ['foo/bar', 'bar']
    }
}

Suppose in index.html you have a reference to /images/foo.png, usemin will search for the revved version of /images/foo.png, say /images/foo.12345678.png in any directories in assetsDirs options.

In others words, given the configuration above, usemin will search for the existence of one of these files:

foo/bar/images/foo.12345678.png

bar/images/foo.12345678.png

@Billy Blaze should be able to replace his custom blockReplacements function by updating the assertDirs in his usemin block to be assetsDirs: ['js/dest/rev/test', 'public']

回答3:

In addition to what Micah said about getting the correct assetsDirs path, you can set the DEBUG variable to actually see what paths are being searched for your files.

If your build task is "build", then you would enter this:

DEBUG=usemin:*,revvedfinder grunt build

That will help to track down exactly what path(s) you need in assetsDirs.

来源：https://stackoverflow.com/questions/26769093/grunt-usemin-not-replacing-reference-block-with-revved-file-line

标签

javascript

grunt-usemin