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:

 1 module.exports = function (grunt) {
 2     // 项目配置
 3     grunt.initConfig({
 4         //读取package.json文件，形成json数据；
 5         pkg: grunt.file.readJSON(‘package.json‘),
 6         //压缩js;
 7         uglify: {
 8             //压缩后的文件中头部的输出信息，options可有可无；
 9             options: {
10                 banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘
11             },
12             //当只有一个文件需要压缩时，可按下列方式书写代码
13 //            build: {
14 //                src: ‘src/<%=pkg.file %>.js‘,
15 //                dest: ‘dest/<%= pkg.file %>.min.js‘
16 //            }
17             my_target:{
18                 files:[
19                     {
20                         expand:true,//表示使用相对路径
21                         cwd:"src/",//相对路径的根目录
22                         src:"*.js",//相对路径下需要压缩的文件，*表示所有该后缀类型的文件，写具体的就是某个具体的文件将会被压缩
23                         dest:"dest/js"//压缩后的文件需要放置的目录，如果不存在的话，会自动创建
24                     }
25                 ]
26             }
27 /************如果是几个特定的文件需要压缩,写法如下*********/
28 /*
29  my_target:{
30                 files:[
31                     {
32                         expand:true,//相对路径
33                         cwd:"src/",
34                         src:‘test.js‘,
35                         dest:"dest/js"
36                     },
37                     {
38                         expand:true,//相对路径
39                         cwd:"src/",
40                         src:‘zepto.js‘,
41                         dest:"dest/js"
42                     }
43                 ]
44             }
45
46 */
47         },
48         //压缩css
49         cssmin:{
50             options:{
51                 //压缩后css文件的头部信息，options可有可无
52                 banner: ‘/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n‘,
53                 ascii_only:true//中文ascii美化，防止中文乱码
54             },
55             my_target:{
56                 files:[
57                     {
58                         expand:true,//表示使用相对路径
59                         cwd:"src/",//相对路径的根目录
60                         src:"*.css",//相对路径下需要压缩的文件，*表示所有该后缀类型的文件，写具体的就是某个具体的文件将会被压缩
61                         dest:"dest/css"//压缩后的文件需要放置的目录，如果不存在的话，会自动创建
62                     }
63                 ]
64             }
65
66         }
67     });
68     // 加载指定的插件
69     grunt.loadNpmTasks(‘grunt-contrib-uglify‘);// 压缩js文件；
70     grunt.loadNpmTasks(‘grunt-contrib-cssmin‘);//压缩css文件；
71
72
73     // 默认要执行的任务
74     grunt.registerTask(‘default‘, [‘uglify‘,‘cssmin‘]);
77 }

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

压缩后的工程目录：