自動化構建工具gulp入門（三）

  相信在看過前兩篇文章以後你已經對gulp有了比較深入的瞭解。但是，雖然開發者們已經爲gulp官網貢獻了豐富多樣的gulp插件，但在實際開發中現有的插件也許並不能完美的滿足我們的需求。所有學會自己開發gulp插件也是我們深入掌握gulp使用的必修課程。

  當然，我們知道gulp是基於nodeJs流的自動化工具，這意味着要想獨立開發gulp的插件我們需要有一定的nodejs基礎。如果你之前並不瞭解nodejs，或者你是個服務端小白，對文件操作，buffer等這些概念還很陌生，下面的學習內容理解起來可能會有一定難度。

  gulp插件開發

  我們先來看一段gulp官網示例的插件代碼:

// through2 是一個對 node 的 transform streams 簡單封裝
var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;

// 常量
const PLUGIN_NAME = 'gulp-prefixer';

function prefixStream(prefixText) {
  var stream = through();
  stream.write(prefixText);
  return stream;
}

// 插件級別函數 (處理文件)
function gulpPrefixer(prefixText) {

  if (!prefixText) {
    throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
  }
  prefixText = new Buffer(prefixText); // 預先分配

  // 創建一個讓每個文件通過的 stream 通道
  return through.obj(function(file, enc, cb) {
    if (file.isNull()) {
      // 返回空文件
      cb(null, file);
    }
    if (file.isBuffer()) {
      file.contents = Buffer.concat([prefixText, file.contents]);
    }
    if (file.isStream()) {
      file.contents = file.contents.pipe(prefixStream(prefixText));
    }

    cb(null, file);

  });

};

// 暴露（export）插件主函數
module.exports = gulpPrefixer;

  我們使用commonjs規範引入了through2和gulp-util兩個npm包進行使用。through用於做流處理，gulp-util是gulp官網爲我們提供的gulp開發工具包。gulpPrefixer是我們自定義的中間件函數，它藉助through創建一個讓每個文件通過的stream通道，傳入的內容可以是null、buffer和stream 返回處理過的文件內容。 這個插件的主要功能是支持修改文件內容，在文件內容前添加自定義內容。

  我們可以將以上代碼內容保存爲plugin.js ,它現在已經是一個獨立的插件了，我們可以在我們的gulpfile.js中將它引入並使用。

let prefixer = require("./plugin");

gulp.task("prefixer",()=>{
    return gulp.src("readme.txt").pipe(prefixer("123")).pipe(gulp.dest("dist"));
});

執行命令

gulp  prefixer

我們可以看到處理後的文件內容已經發生了變化，會在原來內容之前寫入123。

  這樣，一個簡單的插件就已經開發好了。如果你覺得自己的插件確實很有用，官網又沒有類似的插件提供的話，你可以將自己的插件發佈到npm，供更多的開發者使用。

  將插件發佈到npm

  要想發佈自己的npm包，首先要註冊自己的npm賬號。你可以到 npm官網 進行註冊,填寫自己的賬號，密碼和郵箱信息，註冊成功後需要在自己的郵箱進行認證。

  註冊成功後，首先在本地文件夾執行 npm init 命令

  執行完命令後我們需要填寫自己包的信息，name 是的你要發佈的包名,version是包的版本號。首次發佈默認爲1.0.0. 如果之後要重新發布自己的包，一定要修改自己的版本號，否則發佈無法成功。entry point指的是包的入口文件，一般默認都是index.js，當然也可以修改成自定義的文件。author可以寫自己的名字，其他內容都可以直接回車。

  在當前目錄下新建lib文件夾，將plugin.js複製到lib下，並在根目錄下新建index.js（入口文件）, 內容如下:

module.exports = require("./lib/plugin");

  當然，爲了便於別人使用你的包，還需要在當前目錄下新建readme.md介紹自己包的功能已經使用方法.

  好了，在將自己的包發佈到npm之前我們最好在本地做下測試。 將文件夾拷貝到node_modules目錄下，在gulpfile.js中通過 require(“你的包名”) 引入進行測試。如果發現代碼可以正常運行，我們就可以正式發佈自己的npm包了.

  自定義npm包根目錄下執行命令：

npm login

  輸入自己的賬號密碼以及郵箱，登錄成功。

  執行命令

npm  publish

  npm 包發佈成功。你可以登錄 https://www.npmjs.com/ 搜索到自己的npm包。之後，自己或別人使用你的插件的時候就可以使用 npm install 你的包名 進行下載了。

  不過，由於現在npm 官網還沒有檢查機制對你發佈的包進行審覈，所以一些質量不高的包也會被發上去。如果你真的有意開發自己的gulp插件，請一定要遵守gulp插件開發的相關規範。

  開發一個有實際價值的gulp插件你需要仔細閱讀相關的規範說明。gulp插件規範.