引言随着 Web "前后端分离" 架构的日渐普及，Angular.js 因为其 MVVM 模式使其受到广大前端开发者的青睐。然而，在前台项目开发过程中，依赖包的管理、JavaScript / SASS / Less 的编译和压缩、图片的压缩、版本更新，这些零碎繁多的任务阻碍着项目的构建和部署。所以，前端项目的自动化构建也成为了开发中的必备环节。
什么是 gulp?gulp 是一个构建工具，可以通过它自动执行网站开发过程中的公共任务，比如编译 SASS/Less，编译压缩混淆 JavaScript,，合并编译模板和版本控制等。因为 gulp 是基于 Node.js 构建的，所以 gulp 源文件和开发者自己定义的 gulpfile 都被写进 JavaScript 里，前端开发者可以用自己熟悉的语言来编写 gulp 任务。
gulp 本身并不能完成这么多种任务，不过它可以借助 npm 丰富的插件库。开发者可以在 npm 中搜索 gulpplugin 找到想要的插件。例如本文中将要提到的 gulp-cssmin, gulp-jshint, gulp-concat、gulp-inject 等等。
为什么选择 gulp？其实现有的基于 Node.js 的构建工具有很多，比如 Bower，Yeoman，grunt 等。而且自 2013 年 grunt v0.4.0 发布以后，grunt 已经改变了前端的开发方式。那么为什么我们要选 gulp？
gulp 最大的特点是所有的任务都是以 Node.js Stream 的形式处理，构建流程可以由 Stream 之间的 pipe 来定义，省去了把中间文件写到磁盘再读取的过程，而且任务都是默认并行，速度比 grunt 快很多，配置也感觉更省心。
- 易于使用：采用代码优于配置策略，gulp 让简单的事情继续简单，复杂的任务变得可管理。
- 高效：gulp 基于 Node.js 流 Unix 管道连接的方式，不需要往磁盘写中间文件，可以更快地完成构建。
- 高质量：gulp 每个 task 只完成一个任务，提高 task 的重用度。
- 易于学习：gulp 核心 API 约 5 个，开发者能在很短的时间内学会，之后就可以通过管道流来组合自己需要的 task。
安装 gulp首先，gulp 需要全局安装。注意一点，gulp 的安装依赖于 npm，所以要在环境中装好 Node.js。安装好 Node.js 以后运行以下命令：
清单 1. 全局安装 gulp
其次，在项目目录中安装 gulp 为本地模块
清单 2. 本地安装 gulp1
| $ npm install –-save-dev gulp
|
最后，安装项目中依赖的 gulp plugin 模块，如 gulp-cssmin, gulp-jshint
清单 3. 安装 gulp 插件1
| $ npm install –-save-dev gulp-cssmin gulp-jshint
|
使用 gulp首先，在项目根目录中创建一个 gulpfile.js 文件。gulpfile.js 是所有 gulp 的任务配置和启动文件，以下是一个最简易的 gulpfile.js。
清单 4. gulpfile.js1
2
3
4
5
6
7
8
9
10
11
12
| var gulp = require('gulp');
var cssmin = require('gulp-cssmin');
gulp.task('css-task', function() {
return gulp.src('style/main.css')
.pipe(cssmin())
.pipe(gulp.dest('./build'));
});
gulp.task('default', function() {
gulp.run(css-task);
});
|
其次，开发者通过调用 gulp 命令执行默认的名为 default 的任务，或者执行 gulp <taskname> 来执行指定任务。
在上面这段代码中，gulpfile.js 加载了 gulp 和 gulp-cssmin 两个模块之后，执行了开发者指定的 task。Task 的定义有两个参数，第一个为 task 名称 (css-task)，第二个是任务的调用函数。在任务函数中，使用 gulp 模块的 src 方法，指定所要处理的文件，然后使用 pipe 方法，将上一步的输出转为当前的输入，进行链式处理。最后使用 gulp 模块的 dest 方法，将上一步的输出写入本地文件。
在这个例子中，可以清楚的看到 gulp 使用了 Node.js 的 stream 概念：src 方法读入文件产生数据流，dest 方法将数据流写入文件，中间是一些中间步骤，每一步都对数据流进行一些处理。 |
