1、安裝gulp

核心點是gulp檔案的檔名一定是：gulpfile.js。

task就是一個任務（要做的一系列事）

執行通過gulp來執行預設的task或者通過gulp task名來執行指定的task（因為一個gulp檔案裡可能有多個互相獨立的task

2、讀取檔案

gulp.src(files[, options])

效果：

讀取檔案，產生資料流。

files的寫法（字串或陣列）（必填）：

1. js/app.js：指定確切的檔名；
2. js/*.js：某個目錄所有後綴名為js的檔案；
3. js/**/*.js：某個目錄及其所有子目錄中的所有後綴名為js的檔案；
4. !js/app.js
   ：除了js/app.js以外的所有檔案。
5. *.+(js css)：匹配專案根目錄下，所有後綴名為js或css的檔案。

files的寫法（物件）（選填）：

官方文件

1、options.buffer

預設是true，以buffer的形式讀取（即一次讀取整個檔案），而改為false的時候則為stream（流）的方式讀取。

流模式適合讀取大檔案，但是一般的html、css、js之類的，可以用buffer讀取（但推薦用流）。

假如你需要讀取完整個檔案，然後對整個檔案正則匹配，那麼只能用buffer的形式。

2、options.read

預設true，設為false則file.contents返回值為null（不會讀取檔案）

還有 options.base 以及 node-glob 和 glob-stream 所支援的引數，但是這裡略過。

示例：

var gulp = require('gulp');
gulp.task('default', function () {
    gulp.src('a.js')
});

就是這麼簡單，讀取了一個檔案

3、拿來一個流，做點事，再把他返回

stream.pipe(fn)

簡單來說，通過gulp.src()，我們已經讀取了一個檔案流，然而我們需要對這個檔案流做點事，那麼就是pipe的作用了。

1、獲取檔案流：pipe函式用於處理檔案流（來源於上下文），即呼叫pipe方法的這個物件；

2、處理檔案流：pipe接受一個引數，這個引數用於處理這個檔案流；

3、返回檔案流：這個處理檔案流的引數，最後要返回處理後的這個流；

4、連寫pipe：因為拿來和最後返回的是同一個東西，因此是可以連寫的（就像jQuery選擇器選擇到DOM後的連寫那樣）；

先給一個簡單的示例吧：

var gulp = require('gulp');
var through = require('through2');
gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第一次處理')
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            console.log('第二次處理')
            this.push(file)
            cb()
        }))
});

// 輸出
第一次處理
第二次處理

4、對這個檔案流做點啥

上面只是簡述了pipe幹嘛用的，那麼現在我們實際用檔案流的形式做點什麼。

through2模組，用於處理檔案流

用這個模組，基本套路很簡單：

1、引入 through2 模組；

2、呼叫他的obj方法，並傳一個函式作為引數（這個函式是我們的處理函式）；.pipe(through.obj(callback))

3、寫這個callback處理函式；

4、這個callback有三個引數，分別是：file，encode（檔案編碼，比如'utf8'），cb（繼續執行，類似 express 里路由的 next）；

5、我們先對 file 乾點啥，然後通過 this.push(file)（這裡的file是修改後file）才能繼續下面的 pipe，最後執行 cb() 繼續下一個 pipe。

基本示例（不對file做點什麼）：

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            console.log(arguments)
            this.push(file)
            cb()
        }))
});

// 輸出結果
{ '0': <File "a.js" <Buffer 61 62 63 64 65 66>>,
  '1': 'utf8',
  '2': [Function] }

再給一個在原檔案內容後拼接了一個字串的DEMO：

var gulp = require('gulp');
var through = require('through2');

gulp.task('default', function () {
    gulp.src('a.js')
        .pipe(through.obj(function (file, encode, cb) {
            // 顯示當前的文字內容
            console.log(file.contents.toString())
            // 文字內容轉為字串
            var result = file.contents.toString()
            // 添加了一點東西
            result += ' => I add some words here'
            // 再次轉為Buffer物件，並賦值給檔案內容
            file.contents = new Buffer(result)
            // 以下是例行公事
            this.push(file)
            cb()
        }))
        .pipe(through.obj(function (file, encode, cb) {
            // 顯示當前的文字內容（這次顯示的是修改後的）
            console.log(file.contents.toString())
            this.push(file)
            cb()
        }))
        // 把檔案寫到一個新的資料夾裡（不影響原有的），目錄是modified-files
        .pipe(gulp.dest('modified-files'));
});

// 輸出
abcdef
abcdef => I add some words here
並且modified-files/a.js檔案裡的內容是修改後的內容

講道理說，懂以上方法，已經可以解決很多問題了。

無非就是讀取檔案，轉為字串，改改改，變為Buffer物件賦值回去，寫到一個新的資料夾裡（原檔名不變）