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下载:点击打开链接