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

迷南。 2022-08-04 04:23 161阅读 0赞

## 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 plain][view_plain][copy][view_plain][print][view_plain][?][view_plain]

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][http_gruntjs.com_plugins]

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

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(238,238,238)"> <p style="background:rgb(231,229,220)">[txt]&nbsp;<a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="view plain" rel="nofollow">view&nbsp;plain</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="copy" rel="nofollow">copy</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="print" rel="nofollow">print</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="?" rel="nofollow">?</a></p> <p style="background:rgb(231,229,220)">1.&nbsp;npm&nbsp;install&nbsp;grunt-contrib-uglify&nbsp;&nbsp;</p> <p>npm&nbsp;install&nbsp;grunt-contrib-uglify</p> </td> 
  </tr> 
 </tbody> 
</table>

安装：cssmin

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(238,238,238)"> <p style="background:rgb(231,229,220)">[txt]&nbsp;<a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="view plain" rel="nofollow">view&nbsp;plain</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="copy" rel="nofollow">copy</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="print" rel="nofollow">print</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="?" rel="nofollow">?</a></p> <p style="background:rgb(231,229,220)">1.&nbsp;npm&nbsp;install&nbsp;grunt-contrib-cssmin&nbsp;&nbsp;</p> <p>npm&nbsp;install&nbsp;grunt-contrib-cssmin</p> </td> 
  </tr> 
 </tbody> 
</table>

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

二、新建Gruntfile.js

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

\[javascript\] [view plain][view_plain][copy][view_plain][print][view_plain][?][view_plain]

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 plain][view_plain][copy][view_plain][print][view_plain][?][view_plain]

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][http_gruntjs.com_api_grunt]

三、命令行执行grunt任务

进入到项目根目录，敲：

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(238,238,238)"> <p style="background:rgb(231,229,220)">[txt]&nbsp;<a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="view plain" rel="nofollow">view&nbsp;plain</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="copy" rel="nofollow">copy</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="print" rel="nofollow">print</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="?" rel="nofollow">?</a></p> <p style="background:rgb(231,229,220)">1.&nbsp;grunt&nbsp;&nbsp;</p> <p>grunt</p> </td> 
  </tr> 
 </tbody> 
</table>

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

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

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(238,238,238)"> <p style="background:rgb(231,229,220)">[txt]&nbsp;<a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="view plain" rel="nofollow">view&nbsp;plain</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="copy" rel="nofollow">copy</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="print" rel="nofollow">print</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="?" rel="nofollow">?</a></p> <p style="background:rgb(231,229,220)">1.&nbsp;grunt&nbsp;uglify&nbsp;&nbsp;</p> <p>grunt&nbsp;uglify</p> </td> 
  </tr> 
 </tbody> 
</table>

css压缩命令

<table> 
 <tbody> 
  <tr> 
   <td style="background:rgb(238,238,238)"> <p style="background:rgb(231,229,220)">[txt]&nbsp;<a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="view plain" rel="nofollow">view&nbsp;plain</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="copy" rel="nofollow">copy</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="print" rel="nofollow">print</a><a href="http://blog.csdn.net/playboyanta123/article/details/43230831" title="?" rel="nofollow">?</a></p> <p style="background:rgb(231,229,220)">1.&nbsp;grunt&nbsp;cssmin&nbsp;&nbsp;</p> </td> 
  </tr> 
 </tbody> 
</table>

DEMO下载:[点击打开链接][Link 1]

[nodejs.org]: http://nodejs.org/
[view_plain]: http://blog.csdn.net/playboyanta123/article/details/43230831
[http_gruntjs.com_plugins]: http://gruntjs.com/plugins
[http_gruntjs.com_api_grunt]: http://gruntjs.com/api/grunt
[Link 1]: http://download.csdn.net/detail/u010730458/9016289