Grunt是目前最流行的前端构建工具，对前端的效率帮助非常大，但Grunt并非完美无缺，json描述任务的方式，显得过于繁琐和不够简单，对于新手来说，有不少的学习成本。
今天明河介绍个比Grunt更易用的前端构建工具：Gulp.js，最近很火的开源项目，引起了很多前端同学的关注，大家都很好奇，Gulp.js拿什么跟Grunt掰手腕。
大多数前端处于观望状态，Gulp.js这杯可乐很诱人，但第三方插件太少（常用的任务插件都有），被Grunt甩了N条街，当然毕竟是新工具，情有可原，相信假以时日，Gulp.js会被更多前端同学认可，明河希望通过这篇文章，能够让大家看到Gulp.js的潜力。
安装Gulp.js
Gulp.js跟Grunt一样基于Node.js，使用npm安装即可：
npm install -g gulp
想要使用Gulp.js构建您的工程，需要在工程目录中安装Gulp.js的依赖
npm install --save-dev gulp gulp-util
--save-dev 命令配置，可以自动在工程目录的package.json文件内生成包依赖信息，比如：
{
"devDependencies": {
"gulp-util": "~2.2.14",
"gulp": "~3.5.2"
}
}
（如果项目工程中没有package.json，请运行npm init。）
在工程根目录下创建个gulpfile.js文件，内容如下：
var gulp = require('gulp');
var gutil = require('gulp-util');
gulp.task('default', function(){
// place code for your default task here
});
使用gulp命令，运行Gulp.js构建程序：
gulp
表示运行default（默认任务）成功。
接下来看个具体的demo。
简单使用说明
假设demo工程目录结构如下：
我们构建的目标是压缩src目录下的a.js和b.js，合并生成all.min.js放在build目录下。
安装插件
npm install --save-dev gulp-uglify gulp-concat
gulp-uglify：用于压缩js gulp-concat：用于合并文件
Gulp.js目前提供了300多个插件，基本可以满足主流前端构建需求。
编写Gulpfile.js构建脚本
完整代码：
var gulp = require('gulp');
var gutil = require('gulp-util');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
gulp.task('concat', function () {
gulp.src('./src/*.js')
.pipe(uglify())
.pipe(concat('all.min.js'))
.pipe(gulp.dest('./build'));
});
gulp.task('default', ['concat']);
运行gulp命令后：
生成了**all.min.js**。
接下来来看下上述代码的含义。
首先require需要的插件：
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
使用**gulp.task()**定义一个任务目标：
gulp.task('concat', function () {
//...
});
第一个参数为任务名。
gulp.task()返回值为一个stream，stream的使用是Gulp.js的核心，也是Gulp.js与Grunt的最重要区别，Gulp.js充分利用了Node.js的Streams API，关于流的概念下一篇进阶篇会讲解到。
当第二个参数为数组时，表明此任务存在依赖任务，会运行完依赖任务后，才执行该任务，比如：
gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
// Do stuff
});
**gulp.src()**任务处理的目标文件，返回的是stream，请把gulp看成矿泉水厂（想起了恒大冰泉-_-!），文件数据理解为水流，这里相当于阀门打开，水开始顺着管道（每个任务可以理解为一段管道）流去，然后经过各个插件的加工过滤，最后罐装到水瓶里面。
.pipe() 是stream的核心方法，不是gulp的方法哦，第一个参数为插件方法，插件会接收从上游流下的文件，进行处理加工后，再往下流。
.pipe(uglify())
压缩文件
.pipe(concat('all.min.js'))
将压缩后的文件合并成all.min.js，这里留意，不需要目录路径，stream流过来的就是文件数据，只要提供文件名即可。
.pipe(gulp.dest('./build'))
gulp.dest()：用于指定文件输出位置，第一个参数为目录路径。
最后运行任务：
gulp.task('default', ['concat']);
gulp命令默认执行default任务，等于gulp default。
总结
gulp的简单使用先介绍这里，下一篇明河将深入讲解gulp的细节，同时指明Gulp.js为什么比Grunt来得优秀。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent