在前端开发过程中，经常需合并文件、压缩代码、单元测试、检查语法错误等，需要用手工或不同的工具来完成不同的任务，重复劳动且耗时繁琐，而自动化构建工具可以帮我们自动管理和运行各种任务。可以减少代码构建手工出错的机会，大大增强了开发效率，节省资源。
以下是常见的自动构建工具，可根据需要，选择其中之一进行安装。
* Grunt
* Gulp
1. Grunt
首页：http://gruntjs.com
中文：http://www.gruntjs.net
项目：https://github.com/gruntjs（包括Grunt及其各种模块）
源码：https://github.com/gruntjs/grunt
插件：http://gruntjs.com/plugins
1.1 Grunt安装
Grunt和Grunt插件是通过npm（node package manager）安装管理的。
常见的Grunt模块说明
在项目目录安装Grunt及常见的Grunt插件：
npm install grunt-cli -g
npm install grunt --save-dev# 安装常见的grunt模块
npm install grunt-contrib-clean --save-dev
npm install grunt-contrib-compass --save-dev
npm install grunt-contrib-concat --save-dev
npm install grunt-contrib-copy --save-dev
npm install grunt-contrib-cssmin --save-dev
npm install grunt-contrib-imagemin --save-dev
npm install grunt-contrib-jshint --save-dev
npm install grunt-contrib-uglify --save-dev
npm install grunt-contrib-watch --save-dev
grunt-cli为grunt的命令行界面，主要向Grunt传递Gruntfile配置信息，然后执行Grunt来完成配置文件中指定的任务。
-g：--global，表示全局安装，全局安装后可在任何目录执行grunt命令
--save-dev：表示安装grunt模块时，模块会被自动加到项目的package.json文件的依赖列表中
1.2 Grunt配置文件
模块安装完成后，在项目根目录创建名为Gruntfile.js的配置文件。该配置文件是一个node.js的模块，Grunt运行需要该配置文件。
Grunt常用API
-- grunt对象：Grunt通过将grunt对象赋值给module.exports函数，将grunt对象的属性和方法传递给Gruntfile、Grunt模块和task文件中
-- grunt.initConfig(configObject)：grunt.config.init方法的别名，初始化各模块的配置
-- grunt.loadNpmTasks(pluginName)：加载通过npm安装的Grunt模块
-- grunt.registerTask(taskName, taskList)：注册定义任务
以下为压缩css的任务的配置文件
//Gruntfile.jsmodule.exports = function (grunt) {//初始化配置
grunt.initConfig({
cssmin: { //定义配置对象
minify: { //定义任务目标：压缩
expand: true, //表下面的文件占位符*要扩展成具体文件名
cwd: 'css/', //需要处理文件所在目录
src: ['*.css', '!*.min.css'],//需处理的文件列表（*表任意数量字符，!表示不匹配的情况）
dest: 'css/', //处理后生成的文件所在目录
ext: '.min.css' //处理后生成的文件扩展名
},
combine: { //定义任务目标：合并
files: { //目标文件名，源文件名列表
'css/out.min.css': ['css/part1.min.css', 'css/part2.min.css']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-cssmin'); //加载npm安装的cssmin模块
grunt.registerTask('default', ['cssmin:minify', 'cssmin:combine']); //注册任务
};
配置项属性可在Grunt插件列表http://gruntjs.com/plugins 找到对应的模块页面获取详细的信息。上述安装的其它模块的使用方法可参考插件模块页面的介绍。Grunt内部方法调用的基本流程是 grunt.initConfig() -> grunt.loadNpmTasks() -> grunt.registerTask()。
1.3 Grunt任务的运行
1) 运行方式1：Grunt命令行方式执行
命令行进到项目根目录，执行grunt命令，命令格式：grunt 模块名:目标名，未指定模块名，目标名将依次执行相应模块及相应目标。
grunt #各模块及目标依次执行
grunt cssmin #执行cssmin模块下所有目标任务
grunt cssmin:minify #执行cssmin模块下的minify目标任务
2) 运行方式2：开发工具IDE方式执行
1> WebStorm
打开项目代码，右键点击 Gruntfile.js 文件 -> 点击Show Grunt Tasks菜单项 -> 出现Grunt任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。（若Grunt列表出现警告，未列出任务，则需要点击警告设置Grunt的NodeJS和Grunt-cli安装路径）。
2> SublimeText
SublimeText默认没有安装Grunt，参看SublimeText中插件支持的安装方法在Package Control中安装插件"Grunt"。
安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Grunt命令 -> 完成执行。
2. Gulp
首页：http://gulpjs.com
中文：http://www.gulpjs.com.cn
项目：https://github.com/gulpjs
源码：https://github.com/gulpjs/gulp
插件：http://gulpjs.com/plugins
2.1 Gulp安装
Gulp和Gulp插件是通过npm（node package manager）安装管理的。
常见的Gulp模块说明
在项目目录安装Gulp及常见的Gulp插件：
npm install gulp --global # 安装常见Gulp模块
npm install gulp-cache --save-dev
npm install gulp-concat --save-dev
npm install gulp-imagemin --save-dev
npm install gulp-jshint --save-dev
npm install gulp-livereload --save-dev
npm install gulp-minify-css --save-dev
npm install gulp-notify --save-dev
npm install gulp-plumber --save-dev
npm install gulp-rename --save-dev
npm install gulp-replace --save-dev
npm install gulp-strip-debug --save-dev
npm install gulp-uglify --save-dev
npm install imagemin-pngquant --save-dev
npm install del --save-dev
2.2 Gulp配置
模块安装完成后，在项目根目录下创建 gulpfile.js 代码文件。
Gulp常用API
-- gulp.src(globs [,options])：产生数据流。匹配glob或glob数组的文件，返回Vinyl-fs类型的stream，可通过管道(pipe)传递给插件
-- gulp.dest(path [,options])：作为管道的输出写入文件，同时输出将继续输出。多次调用dest将多次输出到多个目录，目录不存在则创建
-- gulp.task(name [,deps], fn)：指定任务名及任务函数来定义任务。default为Gulp默认执行的任务。
-- gulp.watch(glob [, opts], tasks) 或者 gulp.watch(glob [, opts, cb])：监视文件变化执行某些操作，返回可分发change事件的EventEmitter对象。
以下为压缩css的任务的配置文件
//Gulpfile.jsvar gulp = require("gulp"),
mincss = require("gulp-minify-css"),
del = require("del");var stream = gulp.src("css/*.css"); //定义压缩的文件，返回stream//压缩前先清除文件夹里面的内容
gulp.task("clean", function (callback) {
del(["css/min"], callback);
});
gulp.task("mincss", function () {
return stream
.pipe(gulp.dest("css/min")) //输出文件夹
.pipe(mincss()); //执行压缩
});
gulp.task("default", ["clean"], function () {
gulp.start("mincss");//clear任务执行时，执行压缩。start方法可传入多个任务参数，表依次执行
});
Gulp API的使用方法详见：http://www.gulpjs.com.cn/docs/api。方法调用的基本流程是 gulp.src() -> gulp.dest() -> task()。
2.3 Gulp运行
1) 运行方式1：Gulp命令行方式执行
项目根目录，执行gulp命令，命令格式：gulp <task> <othertask>，未指定任务名，执行所有任务。
2) 运行方式2：开发工具IDE方式执行
1> WebStorm
打开项目代码，右键点击 Gulpfile.js 文件 -> 点击Show Gulp Tasks菜单项 -> 出现Gulp任务列表 -> 右键选中其中一个任务项 Run -> 完成执行。（若Gulp列表出现警告，未列出任务，则需要点击警告设置Gulp的NodeJS和Gulp安装路径）
2> SublimeText
SublimeText默认没有安装Gulp，参看SublimeText中插件支持的安装方法在Package Control中安装插件"Gulp"。
安装完成后 -> 快捷键ctrl+shift+p（或Tools -> Command Palette）运行命令行 -> 选中Gulp命令 -> 选中任务 -> 完成执行。
3. 构建工具小结
作为一个工具，核心的需求应该是让开发者花最少的时间学习使用，并为开发者节省更多的时间，解放重复的手工劳动。这就要求一个理想的自动化构建工具应满足 简单，易用，易扩展，易维护，高性能，多平台运行，可靠，可测试等要求。其架构设计应满足的功能需求与非功能性需求如下图所示。
Grunt与Gulp都比较完善的构建工具，但是各自有自己的特点：
Grunt
-- 插件较丰富
-- 易用，常见任务都有插件
-- Grunt及插件的选项较多，使用复杂
Gulp
-- 配置较少，使用简单
-- 利用Node.js流，不需要往磁盘写中间文件，速度更快
-- 易于学习，API较少
推荐阅读：