grunt-usemin helps me to transform
<link href="/dependencies/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="/dependencies/nanoscroller/bin/css/nanoscroller.css" rel="stylesheet" />
<link href="/dependencies/dropzone/downloads/css/dropzone.css" rel="stylesheet" />
to a perfectly combined and minified js:
<link href="scripts/8e1991c7.libraries.js" rel="stylesheet" />
After concat, cssmin and uglify I have a almost perfect folder structure except for images and their locations.
Here is my problem:
All these vendor's css files are including image locations. The bad thing is that all of them are sharing different kind of locations. Some of them are using images inside css folder whereas others are using inside img folder.
How can I configure grunt usemin to rewrite all images urls?
What fixed the CSS
background-image
revving for me was to add a CSS pattern inoptions
, which finds all asset references in the CSS and replaces them with the revved assets.1) Rev images. Add paths of images into rev task.
2) Add paths of file which are including image locations into usemin task.
3) Run grunt.
My approach to this problem was to basically create a separate
styles/select2/select2.css
for each vendor style, and then all relevant images can be copied by Grunt intostyles/select2
(without having to worry about relative paths or overwriting etc) as part of the script. That is:app/index.html
Gruntfile.js
Add a new
copy
task that will copy over vendor styles into the.tmp
directory before they are minimised withcssmin
:And then once they are minimised, copy over the relevant assets (which in this case I'm assuming is just PNG and GIF images):
Finally, add the new tasks into the
build
task:I've solved the problem using the following.
First, we are overriding
useminPrepare
'sflow
, removing the concat task from the css flows. This is needed because concat will destroy relative path information. Since cssmin will itself concat multiple files together, the sepearte concat task is only harmful. (https://github.com/yeoman/grunt-usemin/issues/225)Lastly, we are telling
cssmin
where the "root" of your project is from the Gruntfile. This helpscssmin
rewrite the relative urls it finds relative to this "root" directory.I did a little digging around and found a pair of tasks that look like they'll get the job done: https://github.com/yeoman/grunt-filerev & https://github.com/richardbolt/grunt-cssurlrev. The only problem with this is that you'll have to configure the paths inside your Gruntfile manually, like so:
To my knowledge there isn't a plugin that does this task automatically.
I had to implement a new task. This is my preliminary implementation.