使用gulp構建nodejs，你只需要記住5個函數

標籤：gulp   nodejs   build   

gulp

gulp是一個nodejs的streaming構建工具，所謂的streaming大致意思就是把構建流程想成一個個連結的管道（pipe）。

為什麼要這樣做呢？

要解釋原因，就不得不提到unix。unix本身只提供了數量相對較少的命令，但是你可以命令的組合完成很強大的功能。命令和命令之間的銜接通常就用的是pipe。

類似，使用gulp，你僅僅只需要記住5個命令。這5個命令就是gulp提供給我們的一套streaming構建的架子，也就相當於提供了unix中的pipe功能。至於說pipe中每個命令的功能，則可以使用現有的plugin或者自訂完成。

安裝gulp

如果npm版本比較老，可能會遇到安裝gulp失敗的情況

更新/安裝npm：

curl https://www.npmjs.org/install.sh | sudo sh

安裝npm:

npm install -g gulp

npm install--save-dev gulp

安裝完成以後，可以用gulp -v試一試是否正確

[20:29:16] CLI version 3.8.5
[20:29:16] Local version 3.8.5

一個最簡單的gulp指令碼

gulpfile.js

---

var gulp = require(‘gulp‘)

gulp.task(‘default‘, function() {
   console.log(‘this is the default task‘)
})

運行：gulp

[20:29:02] Starting ‘default‘...
this is the default task
[20:29:02] Finished ‘default‘ after 74 μs

gulp和大多數的構建工具類似，都是由task組成的，上面的例子中，default是task名字，也表示是預設的task。也可以用gulp default運行，執行的是同一task。

一個第二簡單的gulp指令碼(src, pipe)

安裝jasmine外掛程式

npm install --save-dev gulp-jasmine

gulpfile.js

---

var gulp = require(‘gulp‘);
var jasmine = require(‘gulp-jasmine‘);

gulp.task(‘default‘, function () {
    return gulp.src(‘spec/google.spec.js‘)
        .pipe(jasmine());
});

安裝superagent方便測試

spec/google.spec.js

---

var superagent = require(‘superagent‘)

describe (‘google‘, function() {
   it("should return the google homepage", function(done) {
      superagent.get(‘http://www.google.com/‘)
         .end(function(e, res) {
            expect(e).toBe(null)
            expect(res.status).toBe(200)
            done();
         })
   })
})

運行測試

[21:01:07] Starting ‘default‘...
[21:01:07] Finished ‘default‘ after 79 ms
.
Finished in 0.41 seconds
1 test, 2 assertions, 0 failures

gulp有比較多的外掛程式，比如上面用到的gulp-jasmine就是其中的一個。

 gulp.src(‘spec/google.spec.js‘)
        .pipe(jasmine());

有意思的東西來了，什麼是src和pipe？

我們先看一個unix命令：

 cat gulpfile.js | wc -l

這是兩個獨立的命令，cat gulpfile.js用來擷取gulpfile.js的檔案內容，wc -l用來統計檔案中的行數，他們中間用“|”相連。把cat gulpfile.js的輸出作為wc -l的輸入。這是再常見不過的unix命令

gulp中吸取了這樣的想法，上面gulp命令可以想作：

 ‘spec/google.spec.js‘ | jasmine()

這樣應該就非常好理解了吧。

你僅僅需要知道的5個gulp命令

gulp.task(name, fn)這個你應經見過了

gulp.run(tasks...)儘可能多的並行運行多個task

gulp.watch(glob, fn)當glob內容發生改變時，執行fn

gulp.src(glob)返回一個可讀的stream

gulp.dest(glob)返回一個可寫的stream

知道這些以後，你再看https://github.com/gulpjs/gulp中的例子，就顯得容易了很多

參考資料：

http://www.sitepoint.com/introduction-gulp-js/

http://slides.com/contra/gulp

https://github.com/substack/stream-handbook