Gulp.js—比Grunt更易用的前端构建工具

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来得优秀。

7

转载于:https://my.oschina.net/lee2013/blog/301624