本章講解如何編寫gulp插件，這里通過實現一個簡單的插件功能來一步步講解如何編寫gulp插件。
gulp插件結構
// 引入插件需要的包
var through = require('through2');
// 定義gulp插件主函數
// prefix_text：調用插件傳入的參數
module.exports = function gulp_prefix(prefix_text){
// 創建stream對象，每個文件都會經過這個stream對象
var stream = through.obj(function(file, encoding, callback){
// 文件經過stream時要執行代碼
});
// 返回stream對象
return stream;
};
gulp插件的主函數需要返回一個stream對象。創建stream對象的方法有很多種，這里我們使用through.obj()來創建一個stream對象。
調用through.obj()時傳入的函數參數最終會覆蓋stream._transform函數，這里有必要講解下這個函數怎么使用。
transform._transform(file, encoding, callback)
-
file：
stream接收到的文件數據，該文件類型有三種：
stream：流數據，可以用file.isStream()判斷
buffer：二進制數據，gulp.src讀取文件默認是這個類型，可以用file.isBuffer()判斷
null：為空，表示沒有數據，可以用file.isNull()判斷 - encoding：表示編碼方式，一般不用，可以不管
-
callback(error,]data)：回調函數，執行完代碼后都要調用這個函數，告訴
stream引擎，我們已經處理完了；
error：錯誤信息；可省略。
data：文件數據，可以傳入file參數，或者undefined；可省略。
好了，gulp插件的結構就是這么簡單，現在我們開始編寫一個簡單的插件：gulp-prefix。
開始編寫gulp插件
現在我們實現一個能在每個文件開頭加上一段字符串功能的gulp插件，寫插件之前先創建一個package.json
npm init
詢問你name時，可以取名為：gulp-prefix，執行成功后，package.json的內容為：
{
"name": "gulp-prefix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
在本地創建一個插件入口文件index.js文件，內容為：
var through = require('through2');
module.exports = function gulp_prefix(prefix){
if(!prefix){
prefix = "";
}
var prefix = new Buffer(prefix);
var stream = through.obj(function(file, encoding, callback){
// 如果file類型不是buffer 退出不做處理
if(!file.isBuffer()){
return callback();
}
// 將字符串加到文件數據開頭
file.contents = Buffer.concat([prefix, file.contents]);
// 確保文件會傳給下一個插件
this.push(file);
// 告訴stream引擎，已經處理完成
callback();
});
return stream;
};
現在插件的目錄結構為
.
├── index.js
├── package.json
現在可以使用該插件了，將插件復制到你的gulp項目下node_modules/gulp-prefix目錄中，編寫gulpfile.js：
var gulp = require('gulp'),
prefix = require('gulp-prefix');
gulp.task("default", function(){
gulp.src("src/*.js")
.pipe(prefix("prefix data"))
.pipe(gulp.dest("js"));
});
運行
gulp
可以看到所有的js文件內容的前面都加上prefix data字符串
插件測試
像很多項目需要單元測試一樣，我們在開發gulp插件時，也需要有測試功能，接下來我教大家如何測試剛剛寫的gulp-prefix插件。
很多gulp插件使用的測試工具是mocha，首先將package.json中scripts字段的test值修改為mocha，修改后package.json為：
{
"name": "gulp-prefix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha"
},
"author": "",
"license": "ISC"
}
這樣當我們執行npm test，就能運行mocha測試工具。現在在本地創建一個測試腳本test.js：
var assert = require('assert');
var File = require('vinyl');
var prefix = require('./');
describe('gulp-prefix', function() {
it('prefix test', function(done) {
// 創建一個文件
var file = new File({
contents: new Buffer('file data')
});
// 創建一個 prefix流
var stream = prefix('prefix ');
// 將文件寫入prefix流中
stream.write(file);
// 等文件重新出來a
stream.once('data', function(file) {
// 檢查內容是否一致
assert.equal(file.contents.toString('utf8'), 'prefix file data');
done();
});
});
});
安裝測試需要的包
npm install assert mocha through2 vinyl --save-dev
運行測試
[root@localhost gulp-prefix]# npm test
> gulp-prefix@1.0.0 test /root/gulp-prefix
> mocha
gulp-prefix
? prefix test
1 passing (18ms)
更多內容: web前端開發工具講解
