Gulp.js

看見就非常 2015-04-23

展開全文

Grunt是目前最流行的前端構(gòu)建工具，對前端的效率幫助非常大，但Grunt并非完美無缺，json描述任務(wù)的方式，顯得過于繁瑣和不夠簡單，對于新手來說，有不少的學(xué)習(xí)成本。

今天明河介紹個比Grunt更易用的前端構(gòu)建工具： Gulp.js ，最近很火的開源項目，引起了很多前端同學(xué)的關(guān)注，大家都很好奇，Gulp.js拿什么跟Grunt掰手腕。

大多數(shù)前端處于觀望狀態(tài)，Gulp.js這杯可樂很誘人，但第三方插件太少（常用的任務(wù)插件都有），被Grunt甩了N條街，當(dāng)然畢竟是新工具，情有可原，相信假以時日，Gulp.js會被更多前端同學(xué)認(rèn)可，明河希望通過這篇文章，能夠讓大家看到Gulp.js的潛力。

gulp-2

安裝Gulp.js

Gulp.js跟Grunt一樣基于Node.js，使用npm安裝即可：

npm install -g gulp

想要使用Gulp.js構(gòu)建您的工程，需要在工程目錄中安裝Gulp.js的依賴

npm install --save-dev gulp gulp-util

–save-dev 命令配置，可以自動在工程目錄的package.json文件內(nèi)生成包依賴信息，比如：

{
  "devDependencies": {
    "gulp-util": "~2.2.14",
    "gulp": "~3.5.2"
  }
}

（如果項目工程中沒有package.json，請運行npm init。）

在工程根目錄下創(chuàng)建個 gulpfile.js 文件，內(nèi)容如下：

var gulp = require('gulp');
var gutil = require('gulp-util');

gulp.task('default', function(){
  // place code for your default task here
});

使用 gulp 命令，運行Gulp.js構(gòu)建程序：

gulp

enter image description here

表示運行 default （默認(rèn)任務(wù)）成功。

接下來看個具體的demo。

簡單使用說明

假設(shè) demo工程目錄結(jié)構(gòu)如下：

enter image description here

我們構(gòu)建的目標(biāo)是壓縮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多個插件，基本可以滿足主流前端構(gòu)建需求。

編寫Gulpfile.js構(gòu)建腳本

完整代碼：

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 命令后：

enter image description here

生成了 all.min.js 。

接下來來看下上述代碼的含義。

首先require需要的插件：

var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');

使用 gulp.task() 定義一個任務(wù)目標(biāo)：

gulp.task('concat', function () {
      //...
});

第一個參數(shù)為任務(wù)名。

gulp.task()返回值為一個stream，stream的使用是Gulp.js的核心，也是Gulp.js與Grunt的最重要區(qū)別，Gulp.js充分利用了Node.js的 Streams API ，關(guān)于流的概念下一篇進(jìn)階篇會講解到。

當(dāng)?shù)诙€參數(shù)為數(shù)組時，表明此任務(wù)存在依賴任務(wù)，會運行完依賴任務(wù)后，才執(zhí)行該任務(wù)，比如：

gulp.task('mytask', ['array', 'of', 'task', 'names'], function() {
    // Do stuff
});

gulp.src() 任務(wù)處理的目標(biāo)文件，返回的是stream，請把gulp看成礦泉水廠（想起了恒大冰泉-_-!），文件數(shù)據(jù)理解為水流，這里相當(dāng)于閥門打開，水開始順著管道（每個任務(wù)可以理解為一段管道）流去，然后經(jīng)過各個插件的加工過濾，最后罐裝到水瓶里面。

.pipe() 是stream的核心方法，不是gulp的方法哦，第一個參數(shù)為插件方法，插件會接收從上游流下的文件，進(jìn)行處理加工后，再往下流。