自动化构建工具gulp入门(三)

工程化 专栏收录该内容
5 篇文章 0 订阅

  相信在看过前两篇文章以后你已经对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插件规范.

  • 1
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 精致技术 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值