了解grunt常用模块
grunt-contrib-clean:删除文件。
grunt-contrib-compass:使用compass编译sass文件。
grunt-contrib-copy:复制文件。
grunt-contrib-cssmin:压缩以及合并CSS文件。
grunt-contrib-imagemin:图像压缩模块。
grunt-contrib-jshint:检查JavaScript语法。
grunt-contrib-uglify:压缩以及合并JavaScript文件。
grunt-contrib-watch:监视文件变动,做出相应动作。
下载模块文件
//package.json文件
{
"name": "wap_lianxi",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": ""
},
"author": "",
"license": "ISC",
"dependencies": {
"grunt-contrib-clean": "latest",
"grunt-contrib-imagemin": "latest",
"grunt-contrib-less": "latest",
"grunt-contrib-cssmin": "latest",
"grunt-contrib-uglify": "latest"
}
}
Gruntfile.js配置压缩
module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
//读取package.json的内容,形成个json数据
pkg: grunt.file.readJSON('package.json'),
//压缩JS
uglify: {
my_target: {
options: {
//sourceMap: true,
beautify:true,//美化源代码
banner: '/!*! <%= pkg.name %> - v<%= pkg.version %> - ' +
'<%= grunt.template.today("yyyy-mm-dd") %> *!/'
},
files: {//多个js压缩为一个 如果不想把其中的某个一起压缩可以这样写 !'**/asd.js',两个*号表示这个目录下的所有符合条件的文件
'demo/js/a.js': ['demo/js/**/*.js']// 前面是输出目录,后面是当前工作路径
}
}
},
//压缩css
cssmin: {
add_banner: {
options:{
banner: '/* My minified css file */',
report:'min'
},
files:[{//一次性压缩一个文件夹中的所有js文件,但不会把多个文件压缩成一个文件
expand: true,
cwd: 'demo/style/',
src: ['**/*.css'],
dest: 'demo/style/',
ext: '.min.css' //表示处理后的文件后缀名
}
]
}
},
imagemin:{
dynamic:{
options:{
optimizationLevel: 7,// png图片优化水平,3是默认值,取值区间0-7
pngquant: true
},
files:[{
expand: true, // 如果设为true,就表示下面文件名的占位符(即*号)都要扩展成具体的文件名。
cwd: "demo/images/", // 当前工作路径
src: ["*.{png}"], // 要出处理的文件格式(images下的所有png,jpg,gif)
dest: "demo/images/" // 输出目录(直接覆盖原图)
}]
}
}
});
// 加载任务的插件
grunt.loadNpmTasks('grunt-contrib-uglify');
grunt.loadNpmTasks('grunt-contrib-cssmin');
grunt.loadNpmTasks('grunt-contrib-imagemin');
// 发布到测试环境
grunt.registerTask('a', ['uglify','cssmin','imagemin']);
};