Grunt usemin task is not to update nested relative paths correctly
I have a Yeoman project created with "webapp-generator" that contains a static website with HTML embedded files similar to this structure:
-root/
index.html
-directory/
file1.html
-directory2/
file2.html
-js/
(revved .js files)
-css
(revved .css files)
I am using tasks usemin
and filerev
to update filerevved file paths in .html documents. It updates the filenames to js / css / images correctly and it works correctly with root index.html
. However, on embedded HTML files, it does not replace the link to the correct embedded path.
For example.
js/scripts.js
renamed to js/827385.scripts.js
In index.html
<scripts src="js/scripts.js"></scripts>
allows: <scripts src="js/827385.scripts.js"></scripts>
But in directory / file1.html (or any other embedded html file)
<scripts src="../js/scripts.js"></scripts>
also converts to: <scripts src="js/827385.scripts.js"></scripts>
Ignoring relative path ../
-
Is it possible to configure Grunt tasks to know the relative depth of a file in directories in order to keep the relative indicator ../
in the renamed path?
Below is the code snippet for the respective Grunt tasks.
Any help is appreciated, well in advance for any guidance or pointing me in the right direction. PS: I've already followed some of the possible answers in this StackOverflow question: How do I configure grunt-usemin to work with a relative path to no avail.
// Renames files for browser caching purposes
rev: {
dist: {
files: {
src: [
'<%= config.dist %>/scripts/{,**/}*.js',
'<%= config.dist %>/styles/{,**/}*.css',
'<%= config.dist %>/images/{,**/}*.*',
'<%= config.dist %>/styles/fonts/{,**/}*.*',
'<%= config.dist %>/*.{ico,png}'
]
}
}
},
// 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
// <%= config.dist %>
useminPrepare: {
options: {
dest: 'out',
// root: '<%= config.app %>'
},
html: '<%= config.app %>/index.html'
// root: '<%= config.app %>'
},
// Performs rewrites based on rev and the useminPrepare configuration
usemin: {
options: {
assetsDirs: [
'<%= config.dist %>',
'<%= config.dist %>/images',
'<%= config.dist %>/styles'
]
},
html: ['<%= config.dist %>/**/*.html'],
css: ['<%= config.dist %>/styles/**/*.css']
},
source to share
In my case, I found that the problem was with the usemin setting in the html files:
If you have this usemin directive in index.html :
<!-- build:js styles/jquery.js -->
<script src="bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild -->
In directory / file1.html, you should try using the full path:
<!-- build:js /scripts/jquery.js-->
<script src="../bower_components/jquery/dist/jquery.js"></script>
<!-- endbuild-->
which will be converted to something like <script src="/scripts/jquery.34ad31c3.js"></script>
.
source to share