如何自己開發gulp插件？

01-26

因為項目需要，如何自己開發gulp插件

在開發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引擎，我們已經處理完了；這裡說下callback(error,data)的使用:

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 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;

};

    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插件時，也需要有測試功能，接下來我教大家如何測試剛剛寫的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)

更多內容：https://www.beibq.cn/book/eddl866