自动化构建工具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插件规范.

自动化构建工具gulp入门（三）

猜你喜欢