Usemin does not replace reference blocks in HTML
I can see that the css and js files get concatenated correctly, revved and copied to the correct folder. The last step, although being replacing blocks and images in the html file, doesn't work for some reason. The links to images in the css file are replaced.
Gruntfile.js:
useminPrepare: {
html: '<%= yeoman.app %>/index.html',
options: {
dest: '<%= yeoman.dist %>'
}
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
css: ['<%= yeoman.dist %>/styles/{,*/}*.css'],
html: ['<%= yeoman.dist %>/{,*/}*.html'],
options: {
assetsDirs: ['<%= yeoman.dist %>/images', '<%= yeoman.dist %>/styles', '<%= yeoman.dist %>/scripts']
}
},
in Html I have:
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="Styles/main.css">
<link rel="stylesheet" href="Shared/Styles/default.css">
<link rel="stylesheet" href="Shared/Styles/default.date.css">
<link rel="stylesheet" href="Shared/Styles/default.time.css">
<!-- endbuild -->
Conclusion when building:
[1mProcessing as HTML - dist/index.html[22m
Update the HTML to reference our concat/min/revved script files
Update the HTML with the new css filenames
Update the HTML with the new img filenames
Update the HTML with data-main tags
Update the HTML with data-* tags
Update the HTML with background imgs, case there is some inline style
Update the HTML with anchors images
Update the HTML with reference in input
File structure in dist:
– dist
|– index.html
|– styles
|– 146eba12.main.css
|– scripts
|– ...
|– images
|– ...
It was driving me crazy and I can't figure out why. Any help would be much appreciated.
UPDATE: Under further development and I don't know why blocks in the html are now replaced with a single line pointing to the concatenated file, but it doesn't add the hash added during revving. So it does:
<link rel="stylesheet" href="styles/main.css"/>
Instead
<link rel="stylesheet" href="styles/b64b6f59.main.css"/>
source to share
I had exactly the same problem and came across this question in my search. I tried everything (1000 config options) but nothing worked. (however concat, decreasing, revolving, continuing to work)
Then after searching and searching, I found a simple solution: change the line endings from Unix to Dos / Windows format.
This fixed the problem for me.
source to share
Updating files is a different task; "Grunt-filerev". As an example from one of my projects, I have the following in my gruntfile.js:
...
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 8
},
rel: {
files: [
{
src: [
'<%= project.dist %>/assets/fonts/**/*.{eot*,otf,svg,ttf,woff}',
'<%= project.dist %>/assets/img/**/*.{jpg,jpeg,gif,png,webp,svg}',
'<%= project.dist %>/assets/css/*.css',
'<%= project.dist %>/assets/js/*.js'
]
}
]
}
},
...
grunt.registerTask( 'release', [
'clean:build',
'compass:build',
'jekyll:build',
'useminPrepare',
'concat',
'uglify',
'cssmin',
'filerev',
'usemin'
]);
source to share
I realize this is an old question, but it still hasn't gotten an answer to the original question. A simple solution is to remove options from useminPrepare and usemin. The grunt-usemin documentation says:
When the link is relative, by default the referenced element is looked up in the path relative to the current file location in the target directory (e.g. ... if the file is build / bar / index.html then the converted index.html will be in dist / bar and usemin will search dist / bar /../ images / foo.32323.png).
This only works when index.html is in the same directory as the updated file. However, this seems to be the case in the above question.
My implementation of this and the result:
app / index.html
<!-- build:css styles/main.css -->
<link rel="stylesheet" href="styles/main.css">
<link rel="stylesheet" href="styles/default.css">
<link rel="stylesheet" href="styles/default.date.css">
<link rel="stylesheet" href="styles/default.time.css">
<!-- endbuild -->
Gruntfile.js
useminPrepare: {
html: '<%= yeoman.app %>/index.html'
},
filerev: {
options: {
encoding: 'utf8',
algorithm: 'md5',
length: 8
},
css: {
src: ['<%= yeoman.dist %>/styles/main.css']
}
},
usemin: {
css: ['<%= yeoman.dist %>/styles/*.css'],
html: ['<%= yeoman.dist %>/*.html']
}
...
grunt.registerTask('default', [
'useminPrepare',
'concat:generated',
'cssmin:generated',
'filerev',
'usemin'
]);
rn / index.html
<link rel="stylesheet" href="styles/main.b49d2ce4.css">
source to share