Grunt-usemin does not replace the reference block with the revved file line
I have a problem with grunt-usemin where it doesn't replace the non-revved pivot block with a single vertical line. The two files in the reference block will get concatenated and flushed only penalties ; single file metadata.min.js also gets version only fine ; but the link to the updated file is not inserted in index.html . Only a line without a turnover.
I use:
- grunt-usemin 2.6.0
- grunt-filerev 2.1.1
- Zend Framework for Templates (hence the weird templating patterns)
Here's a reference block index.html used before :
<!-- 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 index.html after running the grunt build:
<script src="js/dest/metadata.min.js"></script>
Any reason 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 the configuration disabled somewhere? It doesn't actually look like: Usemin does not replace reference blocks in HTML
I beat my head on the table for a while. Any insight is greatly appreciated.
source to share
Try running grunt --debug
usemin with the following configuration for 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 reflect its current block and object with files modified by filerev.
In my case, I had an additional "public /" folder, so my string would not match the key in the object, and therefore usemin could not 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"}
I ended up fixing it with this special blockReplacements function (e.g. replacing the public / and nasty 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>';
},
source to share
This happened to me as well, and the problem was caused by not having the correct assets in the usemin block. You want your assetDirs array to contain the parent folder of your revved file.
This is a list of directories where we should start looking for an updated version of the assets that the file is currently referencing.
usemin: {
html: 'build/index.html',
options: {
assetsDirs: ['foo/bar', 'bar']
}
}
Suppose in index.html you have a link to /images/foo.png, usemin will look for an updated version of /images/foo.png, say / images / foo.12345678.png in any directories in assetsDirs.
In other words, given the above configuration, usemin will look 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 own blockReplacements function by updating the assertDirs in his usemin block to be assetsDirs: ['js/dest/rev/test', 'public']
source to share
In addition to what Mika said about getting the correct assetsDirs path, you can set the DEBUG variable to actually see what paths your files are looking for.
If your build task is "build", you must enter the following:
DEBUG = usemin: *, revvedfinder grunt build
This will help pinpoint the paths you need in assetsDirs.
source to share