使用grunt搭建自动化web前端开发工具

发表于   |  

为何要用构建工具？

一句话：自动化。对于需要反复重复的任务，例如压缩（minification）、编译、单元测试、linting等，自动化工具可以减轻你的劳动，简化你的工作。当你在 Gruntfile 文件正确配置好了任务，任务运行器就会自动帮你或你的小组完成大部分无聊的工作。

安装grunt-cli

1
npm install -g grunt-cli

实例操作

首先创建一个文件夹（test），里面创建两个文件，文件名分别为package.json，Gruntfile.js(参照官网)；

package.json

1
2
3
4
5
6
{
  "name": "my-project-name",
  "version": "0.1.0",
  "devDependencies": {
  }
}

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
module.exports = function(grunt) {
  // Project configuration.
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    uglify: {
      options: {
        banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'src/<%= pkg.name %>.js',
        dest: 'build/<%= pkg.name %>.min.js'
      }
    }
  });
  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-uglify');
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['uglify']);
};

安装Grunt 和 grunt插件（这里只用到了四个插件）

安装grunt

1
npm install grunt --save-dev

–save-dev 方法可以在当前目录安装grunt的同时，顺便把grunt保存为这个目录的开发依赖项

安装插件

  • grunt-contrib-uglify：压缩js代码
  • grunt-contrib-concat：合并js文件
  • grunt-contrib-jshint：js代码检查
  • grunt-contrib-watch：监控文件修改并重新执行注册的任务
  • grunt-contrib-qunit：单元测试
  • grunt-jscs: js代码风格检查工具
  • grunt-contrib-csslint： css代码检查
  • grunt-scss-lint: sass代码检查

分别执行下面的命令

1
2
3
4
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev

创建两个目录src和build

1
2
mkdir src
mkdir build

在src目录里面下面创建两个js文件，index.js和main.js，随便写点js代码如下

1
2
3
4
5
6
var ex = function() {
	var d = 0;
	return d + 1; 
};
ex();
1
2
3
4
5
6
7
var a = 0;
var b = 1;
for(var i = 0; i < 10; i++){
	var c = a + b + i ;
	console.log(c);
}

配置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
module.exports = function(grunt) {
  // 项目配置
  grunt.initConfig({
    pkg: grunt.file.readJSON('package.json'),
    concat: {
      options: {
        separator: ';\n'
      },
      build: {
        src: ['src/main.js', 'src/index.js'],
        dest: 'build/libs.js'
      }
    },
    jshint: {
      build: ['Gruntfile.js', 'src/*.js'],
      options: {
        jshintrc: '.jshintrc'
      }
    },
    uglify: { 
      options: {
        banner: '/*! <%= pkg.file %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
      },
      build: {
        src: 'build/libs.js',
        dest: 'build/libs.min.js'
      }
    },
    watch: {
      build: {
        files: ['src/main.js', 'src/index.js'],
        tasks: ['concat', 'jshint', 'uglify'],
        options: {
          spawn: false,
        },
      }
    }
  });
  // 加载包含 "uglify" 任务的插件。
  grunt.loadNpmTasks('grunt-contrib-concat');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-contrib-jshint');
  grunt.loadNpmTasks('grunt-contrib-watch');
  // 默认被执行的任务列表。
  grunt.registerTask('default', ['concat', 'jshint', 'uglify', 'watch']);
};

执行命令

1
grunt

此时会生成两个文件 libs.js和 libs.min.js,而且会实时监控index和mian两个文件，如果有变化会检查语法是否有错误，是否执行合并和压缩

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
Running "watch" task
Waiting...
>> File "src\main.js" changed.
Running "concat:build" (concat) task
Running "jshint:build" (jshint) task
>> 3 files lint free.
Running "uglify:build" (uglify) task
>> 1 file created 160 B → 116 B
Running "watch" task
Completed in 0.062s at Mon May 15 2017 10:19:41 GMT+0800 (中国标准时间) - Waiting...