Gulp:插件编写入门 - 文章教程

Gulp:插件编写入门

发布于 2021-08-10 字数 3601 浏览 1035 评论 0

写在前面

我们来看看下面的 gruntfile,里面用到了笔者刚写的一个 gulp 插件 gulp-preprocess。好吧,npm publish 的时候才发现几个月前就被抢注了。为什么星期天晚上在 http://npmjs.org/package/ 上没有搜到 TAT。

文中插件示例可在这里找到:https://github.com/chyingp/gulp-preprocess

这个插件基于 preprocess 这个插件,插件使用方法请 自行脑补。本文就讲解下如何实现 gulp-preprocess 这个插件

var gulp = require('gulp'),
  preprocess = require('gulp-preprocess');

gulp.task('default', function() {
  gulp.src('src/index.html')
    .pipe(preprocess({USERNAME:'程序猿小卡'}))
    .pipe(gulp.dest('dest/'));
});

进入实战

关键代码

我们来看下最关键的几行代码。可以看到,上文的 preprocess() 的作用就是返回一个定制的 Object Stream ,这是实现gulp的流式操作必需的,其他gulp插件也大同小异。

gulp-preprocess/index.js

module.exports = function (options) {
  return through.obj(function (file, enc, cb) {
    // 主体实现忽略若干行
  });
};

接着,看下具体实现。实际上代码很短

引入依赖

首先,引入插件的依赖项。其中:

  • gutil:按照gulp的统一规范打印错误日志
  • through2:Node Stream的简单封装,目的是让链式流操作更加简单
  • preprocess:文本预处理器,主要就是文本替换啦
'use strict';
var gutil = require('gulp-util');
var through = require('through2');
var pp = require('preprocess');

核心逻辑

其次,定义gulp-preprocess的主体代码。没错,就是下面这么短的代码。代码结构也比较清晰,下面还是简单做下分解介绍。

module.exports = function (options) {
  return through.obj(function (file, enc, cb) {
    if (file.isNull()) {
      this.push(file);
      return cb();
    }

    if (file.isStream()) {
      this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
      return cb();
    }

    var content = pp.preprocess(file.contents.toString(), options || {});
    file.contents = new Buffer(content);

    this.push(file);

    cb();
  });
};

核心代码分解

还是直接上代码,在关键位置加上注释。对 through2 不熟悉的童鞋可以参考 这里

module.exports = function (options) {
  return through.obj(function (file, enc, cb) {

    // 如果文件为空,不做任何操作,转入下一个操作,即下一个 .pipe()
    if (file.isNull()) {
      this.push(file);
      return cb();
    }

    // 插件不支持对 Stream 对直接操作,跑出异常
    if (file.isStream()) {
      this.emit('error', new gutil.PluginError(PLUGIN_NAME, 'Streaming not supported'));
      return cb();
    }

    // 将文件内容转成字符串,并调用 preprocess 组件进行预处理
    // 然后将处理后的字符串,再转成Buffer形式
    var content = pp.preprocess(file.contents.toString(), options || {});
    file.contents = new Buffer(content);

    // 下面这两句基本是标配啦,可以参考下 through2 的API
    this.push(file);

    cb();
  });
};

写在后面

要把 gulp 插件内部实现的原理讲透不是件容易的事情,因为实现还是比较复杂的,首先需要对 Buffer、Stream 有一定的了解,包括如何通过 Node 暴露的 API 对 Stream 进行定制化。

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

2512 文章
30 评论
82706 人气
更多

推荐作者

瑾兮

文章 11 评论 2

carlo_sn

文章 0 评论 0

15867725375

文章 0 评论 0

a3576419

文章 0 评论 0

wendy

文章 0 评论 0