用grunt搭建自动化的web前端开发环境（二）配置grunt 【转载自博客园北执】

现在会进行代码的合并和压缩已成为前端人员的必备知识，那么现在来介绍一个grunt的工具。grunt是个风靡世界的工具，它的首页是  http://www.gruntjs.net

这是个中文网站，有文档可以参考。

好了，废话不多说，直接发安装步骤和注意事项。

首先，要安装nodejs，grunt是依赖node滴。上 www.nodejs.org上下载适合你电脑的nodejs版本。

当安装好node.js以后，在命令行中输入

1

node -v

 

把 npm也安装上，npm为一个NodeJS的模块管理

同样，在命令行中输入 ,如果出现版本号，就说明安装成功了。

 

ok,nodejs已经安装好了，在下载安装grunt之前，我们需要建立一个文件目录树，像下面的结构，目的是为了更好的层次关系和更便利的操作

 

Gruntfile.js是我们自己定义的，这个文件用来配置grunt

package.json这个文件是记录下载哪些插件，并配置在Gruntfile.js中，这个后面会详细介绍

src文件夹里面放的是一个css文件夹，一个js文件夹，css文件夹里面放的是演示的css文件，js文件夹里放的是演示用js文件。

dist 文件夹是放压缩以后的css和js文件

lib文件夹里放html文件

 

完整的文件结构如下：(grunt安装之前是没有这个文件夹的)

那package.json里面放什么呢？对了，放咱们配置项，刚开始，如果你用的编辑器没有这么智能的话，只能把下面的内容敲到文件中。

 

 

ok,万事俱备了，开始下载grunt命令行!

grunt命令行（CLI） 安装在全局环境下，所以命令是这么写！

1

npm install -g grunt-cli

 注意，mac os 系统、部分linux系统中，在这句话的前面加上“sudo ”指令。

当安装完了以后，进入我们建立的哪个grunt_test文件夹

1

cd grunt/grunt_test

 

这时，就可以安装grunt了输入:

1

npm install grunt  --save-dev

 

出现了一个node_modules文件夹。大家打开看看就知道里面是什么了。这充分表明grunt已经安装成功。

之前我们没有说过指令中得--save-dev是什么意思

这句话是与package.json这个文件有关的。

这时再看这个文件

偶？自动把grunt的版本号加上啦。对啦，这就是--save-dev的作用。

这时，在src下面的css和js中各建一个concat文件夹，用于存储合并后的文件

现在还需要几个插件：js、css文件链接成一个文件的插件、压缩的插件、错误检查的插件

安装方法一样

npm install grunt-contrib-concat --save-dev

回车安装，完成后安装下一个，依次类推

npm install grunt-contrib-csslint --save-dev

npm install grunt-contrib-cssmin --save-dev

npm install grunt-contrib-jshint --save-dev

npm install grunt-contrib-uglify --save-dev

npm install grunt-contrib-watch --save-dev

当我们把这些插件都装完后，我们再看package.json

所有的插件的版本号都有了。下一步，需要对Gruntfile.js 进行配置

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

module.exports = function(grunt){

    //初始化grunt 配置

    grunt.initConfig({

 

        //获取package.json的信息

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

        //concat插件的配置信息

        concat: {

            options:{

                stripBanners:true, //合并时允许输出头部信息

                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */'

            },

            cssConcat:{

                src:['src/css/css1.css','src/css/css2.css'],

                dest:'src/css/concat/<%= pkg.name %> - <%= pkg.version %>.css' //dest 是目的地输出

            },

            jsConcat:{

                src:'src/js/*.js',

                dest:'src/js/concat/<%=pkg.name %> - <%= pkg.version %>.js'

            }

        },

        //压缩css

        cssmin:{

            options:{

                stripBanners:true, //合并时允许输出头部信息

                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'

            },

            build:{

                src:'src/css/concat/<%=pkg.name %> - <%=pkg.version %>.css',//压缩是要压缩合并了的

                dest:'dist/css/<%= pkg.name %> - <%= pkg.version %>.min.css' //dest 是目的地输出

            }

        },

        //压缩js

        uglify:{

            options:{

                stripBanners:true, //合并时允许输出头部信息

                banner:'/*!<%= pkg.name %> - <%= pkg.version %>-'+'<%=grunt.template.today("yyyy-mm-dd") %> */\n'

            },

            build:{

                src:'src/js/concat/<%=pkg.name %> - <%=pkg.version %>.js',//压缩是要压缩合并了的

                dest:'dist/js/<%= pkg.name %> - <%= pkg.version %>.min.js' //dest 是目的地输出

            }

        },

 

        jshint:{

            options:{

                jshintrc:'.jshint'

            },

            build:['Gruntfile.js','src/js/*js']

        },

 

        csslint:{

            options:{

                csslintrc:'.csslint'

            },

            build:['src/css/*.css']

 

        },

        //watch自动化

        watch:{

            build:{

                files:['src/js/*.js','src/css/*.css'],

                tasks:['jshint','csslint','concat','cssmin','uglify'],

                options:{spawn:false}

            }

        }

 

    });

    //告诉grunt我们将使用插件

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

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

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

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

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

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

    //告诉grunt当我们在终端输入grunt时需要做些什么

    grunt.registerInitTask('default',['jshint','csslint','concat','cssmin','uglify','watch']);//先进行语法检查，如果没有问题，再合并，再压缩

};

 

上面的注释都写的很清楚了，照着这个复制到你得Gruntfile.js里就可以了。

正式压缩前的最后一步：新建两个文件，写入内容，这两个文件是用于css和js代码检查的配置的。大家有兴趣可以从网上查查，这里就不多说了，大家用我这个就没有问题。一个是.csslint  ,一个是.jshint 

注意这两个文件是.开头的，具体为什么现在还没来得及研究，文件是text格式的,跟Gruntfile是同一级的。

.csslint文件的配置：

{    "adjoining-classes":false,    "box-sizing":false,    "box-model" : false,    "compatible-vendor-prefixes": false,    "floats":false,    "font-sizes":false,    "gradients":false,    "important":false,    "known-properties":false,    "outline-none":false,    "qualified-headings":false,    "regex-selectors":false,    "shorthand":false,    "text-indent":false,    "unique-headings":false,    "universal-selector":false,    "unqualified-attributes":false}

.jshint文件配置

{    "boss":false,    "curly":true,    "eqeqeq":true,    "expr":true,    "immed":true,    "newcap":true,    "noempty":true,    "noarg":true,    "undef":true,    "regexp":true,    "browser":true,    "devel":true,    "node":true}

最终最终最终的树结构：

这时，所有的配置都完成了，我们可以进行代码的检查、合并、压缩了~~~

大家在js文件里，css文件里随便写点内容，看看能不能合并压缩成功？

命令是 

grunt

然后回车。

这时，你会发现，世界就在你脚下！又会了一项技能，心里那种成就感是无法言表的。大家加油！