I want to use Grunt (as a Task Runner) and Bower (as a package manager) newly for My projects, but I have a problem when using cssmin Grunt plugin to minify css files.
Suppose I have three folder in bower_component
folder like this:
└── components
| ├── bootstrap
| │ ├── img
| │ │ └── glyhs.gif
| │ └── css
| │ └── bootstrap.css
| └── bxslider-4
| | ├── css
| | │ └── jquery.bxslider.min.css
| | └── images
| | ├── next.gif
| | └── prev.gif
| |
| |__another_plugin
| |__css
| | |__all.css
| |__all_images
| |__picture.png
|__css
|_img
|_all_style.min.css
And Now I want to minify all these css files into a all_style.min.css
file on a directory named css
.
For that I wrote bellow into Gruntfile.js
file:
module.exports = function (grunt) {
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'css/all_style.min.css': [
'bower_components/bootstrap/css/bootstrap.css',
'bower_components/bxslider-4/jquery.bxslider.min.css'
]
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin');
};
Css minifying works fine but problem is that references to image in main css files is relative to each plugin folder and after minifying browser can not found them.
I want a way that along with minifying css file ,in addition to copy image referenced in the CSS Files into dest img
folder ,all previous image url changed to proper one based on new place.
I search for that and readed how-to-rewrite-urls-of-images-in-vendor-css-files-using-grunt and similar question but beacause have not any GruntFile configuration, I could not understand what did they do.
Update:
This is my package.js
content :
{
"name": "gabrabad",
"version": "1.0.0",
"description": "",
"main": "index.js",
"dependencies": {},
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-uglify": "^1.0.1"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "ahmadbadpey",
"license": "ISC"
}