I am using grunt-contrib-cssmin, for the minification of my css files. I want the relative urls in the css files to be replaced automatically in my target minified file. I have looked for this problem and found the two options that I can use to replace the url,
target, root
I think target
is the one I am supposed to be using. I tried it in my following Gruntfile.js but it did not resulted in the minified file that I wanted.
Following is the Gruntfile.js
module.exports = function(grunt) {
// Project configuration.
grunt.initConfig({
cssmin: {
combine: {
options: {
target: "build/"
},
files: [{
dest: 'build/app.min.css',
src: "Modules/test/app.css"
}]
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
// Default task(s).
grunt.registerTask('default', ['cssmin']);
};
It converts following app.css -:
.edit {
background: url(../../Main/img/edit.png);
}
to following app.min.css
.edit{background:url(../../Main/img/edit.png)}
What I want is that the URL of the minified be something like the following -:
.edit{background:url(../Main/img/edit.png)}
I think the target options is supposed to change the relative URL, but it is doing nothing in my case. Please let me know what I am doing anything wrong.
Thanks,
Sukhdeep
I think you need to set rebase to true, and set the paths appropriately. I was struggling with that too, and it was not obvious. After a bit of trial and error i got it to work like this.
grunt.initConfig({
cssmin: {
options: {
relativeTo: "./Main/img",
target: "./build",
rebase: true
},
combine: {
files: [{
dest: 'build/precisionag.min.css',
src: "Modules/test/app.css"
}]
}
}
});
More information on the different clean-css options can be found here clean-css.