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:該文件用來為

· [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

安裝：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任務

進入到項目根文件夾，敲：

就會按Gruntfile配置的文件進行壓縮合並。

也能夠單獨運行，例運行js壓縮命令：

css壓縮命令

DEMO下載:點擊打開鏈接

Grunt的配置及使用（壓縮合並js/css）