Grunt的配置及使用（压缩合并js/css）

Grunt的配置及使用（压缩合并js/css）

安装

前提是你已经安装了nodejs和npm。 你可以在 nodejs.org 下载安装包安装，也可以通过包管理器（比如在 Mac 上用 homebrew，同时推荐在 Mac 上用 homebrew）。

 

安装grunt CLI

npm install -g grunt-cli
按照官方的说法，grunt-cli只是为了在同一台机器上安装不同的grunt版本，那么咱们先不去管他。

在项目中使用grunt

首先需要往项目里添加两个文件：package.json和Gruntfile.js

· package.json:该文件用来为npm存放项目配置的元数据，与grunt关系最大的配置在devDependencies中。

· [javascript] view plaincopyprint?
1. {  
2.     "name": "cyjs",  
3.     "version": "0.1.0",  
4.     "description": "js for k68.org",  
5.     "homepage": "http://www.k68.org/",  
6.     "author": "firebaby",  
7.     "devDependencies": {  
8.       "grunt": "~0.4.1",  
9.       "grunt-contrib-jshint": "~0.3.0",  
10.       "grunt-contrib-concat": "~0.1.1",  
11.       "grunt-contrib-uglify": "~0.1.2",  
12.       "grunt-contrib-cssmin": "~0.5.0",  
13.       "grunt-htmlhint": "~0.9.2"  
14.     }  
15. }  
· {

·     "name": "cyjs",

·     "version": "0.1.0",

·     "description": "js for k68.org",

·     "homepage": "http://www.k68.org/",

·     "author": "firebaby",

·     "devDependencies": {

·       "grunt": "~0.4.1",

·       "grunt-contrib-jshint": "~0.3.0",

·       "grunt-contrib-concat": "~0.1.1",

·       "grunt-contrib-uglify": "~0.1.2",

·       "grunt-contrib-cssmin": "~0.5.0",

·       "grunt-htmlhint": "~0.9.2"

·     }

}

 

· Gruntfile.js:注意G的大写，这个文件就是grunt的配置了，其中详细定义了每个任务的细节和执行任务的顺序等。

一、安装grunt

方式一、调用配置文件一起安装

npm install
方式二、逐步安装

在命令行进入项目所在目录，键入如下命令即可，npm会根据devDependencies中的配置，将需要的grunt及其插件下载到你的项目目录中。

npm install grunt --save-dev
grunt-contrib-jshint（js语法检查）、grunt-contrib-concat（js合并）、grunt-contrib-uglify（采用UglifyJS压缩js）、grunt-contrib-cssmin（Css压缩合并）、grunt-htmlhint（html语法验查），以上都是常用的插件。

更多插件，请访问：http://gruntjs.com/plugins

在项目目录下安装插件也可采用如下方式安装：
安装：uglify

[txt] view plaincopyprint? 1. npm install grunt-contrib-uglify   npm install grunt-contrib-uglify

安装：cssmin

[txt] view plaincopyprint? 1. npm install grunt-contrib-cssmin   npm install grunt-contrib-cssmin

插件安装完成后，查看根目录，会发现node_modules目录，包含了相应的插件目录。

二、新建Gruntfile.js

Gruntfile.js由以下内容组成
1、wrapper函数，结构如下，这是Node.js的典型写法，使用exports公开API

[javascript] view plaincopyprint?
1. module.exports = function(grunt) {  
2.      // Do grunt-related things in here  
3.    };  
 module.exports = function(grunt) {

      // Do grunt-related things in here

    };

2、项目和任务配置 

3、载入grunt插件和任务

4、定制执行任务

例：

[javascript] view plaincopyprint?
1. module.exports = function(grunt) {  
2.   //配置参数  
3.   grunt.initConfig({  
4.      pkg: grunt.file.readJSON('package.json'),  
5.      concat: {  
6.          options: {  
7.              separator: ';',  
8.              stripBanners: true  
9.          },  
10.          dist: {  
11.              src: [  
12.                  "js/config.js",  
13.                  "js/smeite.js",  
14.                  "js/index.js"  
15.              ],  
16.              dest: "assets/js/default.js"  
17.          }  
18.      },  
19.      uglify: {  
20.          options: {  
21.          },  
22.          dist: {  
23.              files: {  
24.                  'assets/js/default.min.js': 'assets/js/default.js'  
25.              }  
26.          }  
27.      },  
28.      cssmin: {  
29.          options: {  
30.              keepSpecialComments: 0  
31.          },  
32.          compress: {  
33.              files: {  
34.                  'assets/css/default.css': [  
35.                      "css/global.css",  
36.                      "css/pops.css",  
37.                      "css/index.css"  
38.                  ]  
39.              }  
40.          }  
41.      }  
42.   });  
43.    
44.   //载入concat和uglify插件，分别对于合并和压缩  
45.   grunt.loadNpmTasks('grunt-contrib-concat');  
46.   grunt.loadNpmTasks('grunt-contrib-uglify');  
47.   grunt.loadNpmTasks('grunt-contrib-cssmin');  
48.    
49.   //注册任务  
50.   grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);  
51. }  
module.exports = function(grunt) {

  //配置参数

  grunt.initConfig({

     pkg: grunt.file.readJSON('package.json'),

     concat: {

         options: {

             separator: ';',

             stripBanners: true

         },

         dist: {

             src: [

                 "js/config.js",

                 "js/smeite.js",

                 "js/index.js"

             ],

             dest: "assets/js/default.js"

         }

     },

     uglify: {

         options: {

         },

         dist: {

             files: {

                 'assets/js/default.min.js': 'assets/js/default.js'

             }

         }

     },

     cssmin: {

         options: {

             keepSpecialComments: 0

         },

         compress: {

             files: {

                 'assets/css/default.css': [

                     "css/global.css",

                     "css/pops.css",

                     "css/index.css"

                 ]

             }

         }

     }

  });

 

  //载入concat和uglify插件，分别对于合并和压缩

  grunt.loadNpmTasks('grunt-contrib-concat');

  grunt.loadNpmTasks('grunt-contrib-uglify');

  grunt.loadNpmTasks('grunt-contrib-cssmin');

 

  //注册任务

  grunt.registerTask('default', ['concat', 'uglify', 'cssmin']);

}

 

grunt api文档：http://gruntjs.com/api/grunt

三、命令行执行grunt任务

进入到项目根目录，敲：

[txt] view plaincopyprint? 1. grunt   grunt

就会按Gruntfile配置的文件进行压缩合并。

也可以单独执行，例执行js压缩命令：

[txt] view plaincopyprint? 1. grunt uglify   grunt uglify

css压缩命令

[txt] view plaincopyprint? 1. grunt cssmin

 

DEMO下载:点击打开链接