how to rewrite relative url in minified css with cssmin? - css

Question

I've been looking for a solution to my issue and I've found posts with similar problems, but not the same. I have the following folder structure:
js
└── GUIFramework
├── external
└── WaspFramework
├── Core
└── GUI
└── Controls
└── WaspMask
├── css
│ └── WaspMask.css
└── resources
└── default_loader_circle.gif
Inside WaspMask.css file I have this rule:
.wasp-loader-default {
background-image: url("../resources/default_loader_circle.gif");
}
Well, I've tried to minify it (combined with other css files) with cssmin plugin. My gruntfile is placed in WaspFramework folder, and I want generate the minified css there. The gruntfile file looks like this:
module.exports = function (grunt) {
var _sources = grunt.file.readJSON('./sources.json');
var _filesCSS = _sources.css;
grunt.initConfig({
cssmin: {
wasp: {
options: {
keepSpecialComments: 0
},
files: {
'wasp-bundle.min.css': _filesCSS
}
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// register at least this one task
grunt.registerTask('default', ['cssmin']);
};
In _filesCSS I have the paths of all the files to minify and combine, WaspMask.css included.
My problem is that with this configuration of cssmin, the url of the wasp-loader-default class hasn't changed so, obviously, the output file can't find the image. I've tried changing the cssmin options, adding the root property:
options: {
keepSpecialComments: 0,
root: '.',
},
It changes the url to /GUI/Controls/WaspMask/resources/default_loader_circle.gif, but it doesn't work because of the first slash of the path. I would need to get a relative path to the output file (GUI/Controls/WaspMask/resources/default_loader_circle.gif should work) because my application is published under a virtual directory. So I can't use a full path from the root of the application. I've even tried to set other values to root but some of them change the url to a full path and others add the first slash to the returned path.
Any idea about how to solve this?

Answer 1

After being looking for a solution to my problem, I've found the property I need in this issue of the 'cssmin' plugin:
https://github.com/gruntjs/grunt-contrib-cssmin/pull/47
Although I've found a little issue while I was compressing the 'bootstrap.css' file in my vendor's bundle file. This issue and a possible solution (basically, setting "noAdvanced" property to true in the task's options) is explained deeply in the post I did yesterday:
https://github.com/gruntjs/grunt-contrib-cssmin/issues/103
EDIT:
Here is my grunt file:
module.exports = function (grunt) {
var conf = grunt.file.readJSON('sources.json');
grunt.initConfig({
cssmin: {
options: {
keepSpecialComments: 0,
target: 'commonDir',
noAdvanced: true
},
test: {
files: {
'test.min.css': conf.css
}
}
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-cssmin');
// register at least this one task
grunt.registerTask('default', ['cssmin']);
};
The target property is the common physical directory to all the files to minify (I load those files through a json file which contains their paths).
noAdvanced property is the option I use to avoid the problem I've explained with bootstrap.css, although in the last comment by #XhmikosR posted in https://github.com/gruntjs/grunt-contrib-cssmin/issues/103, he says that there is a patch to fix it. I've not checked it yet.