632
就算萌新也能看得懂的gulp教程（1）：①讀②改③寫
1、安裝gulp
核心點是gulp文件的文件名一定是：gulpfile.js。
task就是一個任務（要做的一係列事）
運行通過gulp來執行默認的task或者通過gulp task名來執行指定的task（因為一個gulp文件裏可能有多個互相獨立的task
2、讀取文件
gulp.src(files[, options])
效果：
讀取文件，產生數據流。
files的寫法（字符串或數組）（必填）：
-
js/app.js：指定確切的文件名； -
js/*.js：某個目錄所有後綴名為js的文件； -
js/**/*.js：某個目錄及其所有子目錄中的所有後綴名為js的文件； -
!js/app.js：除了js/app.js以外的所有文件。 -
*.+(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模塊，用於處理文件流
這個模塊幹嘛用的，有興趣的可以看看npm裏的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對象賦值回去，寫到一個新的文件夾裏（原文件名不變）
最後更新：2017-10-31 00:33:25