grunt压缩多个js文件和css文件

压缩前的工程目录：



1、安装js,css需要的插件

使用npm安装：npm install grunt-contrib-uglify --save-dev -------->安装js压缩插件

npm install grunt-contrib-cssmin --save-dev -------->安装css压缩插件

手动安装后，在package.json文件里，会自动将“grunt-contrib-uglify”加入，并且是当前grunt-contrib-uglify的最新版本，就如下面的package.json文件中红色部分，

“grunt-contrib-cssmin”与上同理。

或者在package.json中加入配置：

{
"name": "DailyBook",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"body-parser": "~1.13.1",
"cookie-parser": "~1.3.5",
"debug": "~2.2.0",
"ejs": "~2.3.2",
"express": "~4.13.0",
"morgan": "~1.6.1",
"serve-favicon": "~2.3.0"
},
"devDependencies": {
"grunt": "^0.4.5",
"grunt-contrib-cssmin": "^0.12.3",
"grunt-contrib-uglify": "^0.9.1"
},
"main": "app.js",
"author": "",
"license": "ISC"
}

然后npm install。

2、创建gruntfile.js文件，配置grunt:

module.exports = function (grunt) {
// 项目配置
grunt.initConfig({
//读取package.json文件，形成json数据；
pkg: grunt.file.readJSON('package.json'),
//压缩js;
uglify: {
//压缩后的文件中头部的输出信息，options可有可无；
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
},
//当只有一个文件需要压缩时，可按下列方式书写代码
//            build: {
//                src: 'src/<%=pkg.file %>.js',
//                dest: 'dest/<%= pkg.file %>.min.js'
//            }
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.js",//相对路径下需要压缩的文件，*表示所有该后缀类型的文件，写具体的就是某个具体的文件将会被压缩
dest:"dest/js"//压缩后的文件需要放置的目录，如果不存在的话，会自动创建
}
]
}
/************如果是几个特定的文件需要压缩,写法如下*********/
/*
my_target:{
files:[
{
expand:true,//相对路径
cwd:"src/",
src:'test.js',
dest:"dest/js"
},
{
expand:true,//相对路径
cwd:"src/",
src:'zepto.js',
dest:"dest/js"
}
]
}

*/
},
//压缩css
cssmin:{
options:{
//压缩后css文件的头部信息，options可有可无
banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n',
ascii_only:true//中文ascii美化，防止中文乱码
},
my_target:{
files:[
{
expand:true,//表示使用相对路径
cwd:"src/",//相对路径的根目录
src:"*.css",//相对路径下需要压缩的文件，*表示所有该后缀类型的文件，写具体的就是某个具体的文件将会被压缩
dest:"dest/css"//压缩后的文件需要放置的目录，如果不存在的话，会自动创建
}
]
}

}
});
// 加载指定的插件
grunt.loadNpmTasks('grunt-contrib-uglify');// 压缩js文件；
grunt.loadNpmTasks('grunt-contrib-cssmin');//压缩css文件；

// 默认要执行的任务
grunt.registerTask('default', ['uglify','cssmin']);
}

3、输入命令 grunt 运行。结果将文件自动压缩并生成相应的文件目录：

压缩后的工程目录：