manlili blog

grunt实例

发表于 | 分类于

学了那么多天grunt，现在来写个稍微复杂点的例子。
github地址：https://github.com/manlili/grunt_learn里面lesson02

利用grunt进行css、js的检查、合并和压缩

第一步：准备源文件

目录如下：
图
其中
①src文件里面放源文件，里面有css文件夹包含css1.css和css2.css，js文件夹包含一个未压缩的test.js文件
②dist放处理过的文件
③.jshint和.csslint分别是检测js和css语法的配置文件
其中：
css1.css内容是：

1
2
3
.a {
	color: red;
}

css2.css内容是：

1
2
3
.b {
	color: black;
}

test.js内容是：

1
2
3
4
var i = 1,sum = 0;
for (i= 1; i< 10; i++) {
	sum = sum + i;
}

.jshint内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
    "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
}

.csslint内容是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{
    "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
}

第二步:准备package.json

生成package.json命令,右键gitBash输入

1
npm init

然后按提示输入参数即可生成package.json文件,如下图：
图
最后生成的package.json内容是：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
{
  "name": "grunt_learn",
  "version": "2.0.0",
  "description": "利用grunt进行css、js的检查、合并和压缩",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/manlili/grunt_learn.git"
  },
  "keywords": [
    "grunt_learn"
  ],
  "author": "manlili",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/manlili/grunt_learn/issues"
  },
  "homepage": "https://github.com/manlili/grunt_learn#readme"
}

第三步:安装grunt和插件

然后去安装grunt,进入package.json所在文件夹，输入

1
npm install grunt  --save-dev

然后发现出现node_modules文件夹，代表安装成功，再来看下文件目录：
图
同时发现package.json里面devDependencies有了内容
再来看看package.json里面的内容

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
{
  "name": "grunt_learn",
  "version": "2.0.0",
  "description": "利用grunt进行css、js的检查、合并和压缩",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/manlili/grunt_learn.git"
  },
  "keywords": [
    "grunt_learn"
  ],
  "author": "manlili",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/manlili/grunt_learn/issues"
  },
  "homepage": "https://github.com/manlili/grunt_learn#readme",
  "devDependencies": {
    "grunt": "^1.0.1"
  }
}

这是我们加了–save-dev的作用，依赖grunt模块。

利用grunt进行css、js的检查、合并和压缩，所以我们还要引入几个插件：
引入的语法是：

1
2
3
4
5
6
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里面devDependencies内容发生了更新
再来看看package.json里面的内容

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
{
  "name": "grunt_learn",
  "version": "2.0.0",
  "description": "利用grunt进行css、js的检查、合并和压缩",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+ssh://git@github.com/manlili/grunt_learn.git"
  },
  "keywords": [
    "grunt_learn"
  ],
  "author": "manlili",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/manlili/grunt_learn/issues"
  },
  "homepage": "https://github.com/manlili/grunt_learn#readme",
  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-csslint": "^2.0.0",
    "grunt-contrib-cssmin": "^2.0.0",
    "grunt-contrib-jshint": "^1.1.0",
    "grunt-contrib-uglify": "^2.2.0",
    "grunt-contrib-watch": "^1.0.0"
  }
}

第四步:创建Gruntfile.js文件

直接在package.json同目录下，创建空白的js文件命名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']);//先进行语法检查，如果没有问题，再合并，再压缩
};

第五步: 运行grunt出最终结果

右键打开gitBash输入

1
grunt

就会发现：
图
然后发现多了很多处理的文件
图

请我喝杯果汁吧！