Gulp.js—比Grunt更易用的前端构建工具-前端自动化-CFANZ编程社区

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

Grunt是目前最流行的前端构建工具，对前端的效率帮助非常大，但Grunt并非完美无缺，json描述任务的方式，显得过于繁琐和不够简单，对于新手来说，有不少的学习成本。

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

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()

.pipe()

.pipe(uglify())

压缩文件

pipe(concat('all.min.js'))

将压缩后的文件合并成all.min.js，这里留意，不需要目录路径，stream流过来的就是文件数据，只要提供文件名即可。

pipe(gulp.dest('./build'))

gulp.dest()

最后运行任务：

gulp.task('default', ['concat']);

gulp default

总结

gulp的简单使用先介绍这里，下一篇明河将深入讲解gulp的细节，同时指明Gulp.js为什么比Grunt来得优秀。