本来想写一片比较完成的文章来介绍这个工具,但是查看github上的文档<<<传送门>>>,说明文档少的简直是可怜,姑且记下github上面的两个例子吧。
前面的步骤无非是安装grunt-cli,创建grunt项目等等事件,如果有不明白的请移步Grunt插件之uglify代码js代码压缩与合并 查看,这里只讲到Gruntfile.js的配置:
css文件合并
module.exports = function(grunt){
grunt.initConfig({
cssmin: {
options: {
shorthandCompacting: false,
roundingPrecision: -1
},
target: {
files: {
'dest/output.css': ['src/a.css', 'src/b.css']
}
}
}
})
grunt.loadNpmTasks('grunt-contrib-cssmin');
}
执行任务
grunt cssmin
会将src目录下的a.css和b.css文件合并压缩成dest/output.css文件
批量压缩
module.exports = function(grunt){
grunt.initConfig({
cssmin: {
options: {
sourceMap :true, //生成sourceMap文件
},
target: {
files: [{
expand: true, //展开下面*通配符匹配的文件
cwd: 'src/css', //源文件根目录
src: ['**/*.css', '!**/*.min.css'], //不要做 “!” 指定的文件
dest: 'css', //压缩文件的输出目录
ext: '.min.css', //压缩文件的后缀名
}]
}
}
})
grunt.loadNpmTasks('grunt-contrib-cssmin');
}