I've just started using grunt and cssmin for automating the CSS minification process. This works fine at the very first time, however later on the file content gets appended to the minified file instead of overwriting it, and its duplicated, file size goes high and high!!
My gruntfile.js file content as follows.
module.exports = function (grunt) {
grunt.initConfig({
// define source files and their destinations
cssmin: {
target: {
files: [{
src: ['assets/front/css/*.css', '!*.min.css'], // source files mask
dest: 'assets/front/css/', // destination folder
expand: true, // allow dynamic building
flatten: true, // remove all unnecessary nesting
ext: '.min.css' // replace .css to .min.css
}],
}
},
watch: {
css: { files: 'assets/front/css/*.css', tasks: [ 'cssmin' ] },
}
});
// load plugins
grunt.loadNpmTasks('grunt-contrib-watch');
grunt.loadNpmTasks('grunt-contrib-cssmin');
// register at least this one task
grunt.registerTask('default', [ 'cssmin', 'watch' ]);
};
Please advise, where am I making mistake.
I believe this issue on GitHub is related, in which two solutions were discussed:
1) Use clean before minifying:
clean: ['your_path/css/*.min.css', '!your_path/css/*.css'],
cssmin: {
minify: {
expand: true,
cwd: 'your_path/css/',
src: ['*.css'],
dest: 'your_path/css/',
ext: '.min.css'
}
}
2) Use absolute file paths and not */**.css paths, as such:
cssmin: {
combine: {
files: {
'path/to/output.css': ['path/to/input_one.css', 'path/to/input_two.css']
}
}
}