Gulp:插件编写入门
之前挖了个坑,准备写篇gulp插件编写入门的科普文,之后迟迟没有动笔,因为不知道该肿么讲清楚Stream这货,毕竟,gulp插件的实现不像grunt插件的实现那么直观。
好吧,于是决定单刀直入了。文中插件示例可在这里找到:https://github.com/chyingp/gulp-preprocess
写在前面
我们来看看下面的gruntfile
,里面用到了笔者刚写的一个gulp插件gulp-preprocess
。好吧,npm publish的时候才发现几个月前就被抢注了。为什么星期天晚上在 http://npmjs.org/package/ 上没有搜到 TAT
这个插件基于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进行定制化。可以参考笔者的另一篇随笔《gulp.src()内部实现探究》,虽然也只是讲了很小的一部分。
Gulp:插件编写入门相关推荐
- c4d脚本python教程_C4D脚本插件编写入门视频教程Intro to Python Scripting | C4DSKY
C4D脚本插件编写入门视频教程Intro to Python Scripting in Cinema 4d 在这期视频教程中,作者来自Brograph Tuts,讲解了脚本日志和脚本管理器的使用,如何 ...
- CobaltStrike 插件编写入门教程
作者: 飞天魔鬼 免责声明:本文仅供学习研究,严禁从事非法活动,任何后果由使用者本人负责. 简介 这篇文章主要以写一个判断beacon中存在的杀软进程脚本为例子来介绍如何去尝试从零开始写一个cobal ...
- BurpSuite实战十六之BurpSuite插件编写
Burp Suite的强大除了自身提供了丰富的可供测试人员使用的功能外,其提供的支持第三方拓展插件的功能也极大地方便使用者编写自己的自定义插件.从上一章节我们已经了解到, Burp Suite支持的插 ...
- Gulp资料大全 入门、插件、脚手架、包清单
awesome-gulp中文版 一份gulp的资源,插件和使用实例清单, 致力于打造更好的前端工程构建流程. 资源 通用资源 官网 Github库 插件注册 NPM模块 插件黑名单 官方文档 快速开始 ...
- Gulp简介、gulp基本使用步骤、gulp-cli工具、gulpfile.js文件、gulp插件
Gulp介绍: gulp概念: 基于node开发的前端构建工具模块,将前端机械化的操作编写成任务自动化操作,类似于webpack构建,可以完成代码压缩.语法转换.抽离公共文件.自动实现浏览器刷新等. ...
- 3ds max sdk导出插件编写的心得
3ds max sdk导出插件编写的心得 作者:yhchinabest 来自:CG先生-3D图形插件开发网http://www.cgsir.com 写在前面 为什么要写这个心得?去年11月份的时候我写 ...
- node.js的第三方模块 nodemon、nrm、Gulp、Gulp插件
什么是第三方模块 别人写好的.具有特定功能的.我们能直接使用的模块即第三方模块,由于第三方模块通常都是由多个文件组成并且被放置在一个文件夹中,所以又名包. 第三方模块有两种存在形式: 以js文件的形式 ...
- MAYA API插件编程--入门篇
MAYA API插件编程--入门篇 作者:华文广 日期:2010.11.28 我们知道,MAYA是一个基于结点的插件式软件架构,这种开放式的软件架构是非常优秀的,它可以让用户非常方便 ...
- VS2010插件编写学习总结
VS2010 Addins 外接程序(插件)开发 http://www.cnblogs.com/Leo_wl/archive/2013/03/21/2973886.html 简单做了一个添加文件头注视 ...
最新文章
- 这段时间Dot Text 老出错,实在没办法解决了,特来求助。[InvalidOperationException: 内部连接致命错误。]...
- SQL Server中的锁类型及用法(转载)
- Java Hashtable get()方法与示例
- Python update 函数 - Python零基础入门教程
- 信息学奥赛一本通 2021:【例4.6】最大公约数
- 让MySQL速度提升3倍的19种优化方式
- 高性能MySQL-3rd-(五)创建高性能索引
- android+接入易宝支付,iOS客户端连接易宝支付接口
- 【python】速查手册(基础笔记) - 人生苦短,我用python
- 通俗理解什么是隐马尔科夫模型(hmm)
- PLC编程从入门到精通视频教程【副业学习会】
- conda 解决An HTTP error occurred when trying to retrieve this URL.
- c语言编程小球运行结果是,如何用C语言编程一个滚动的小球 最好是五彩的 滚动的...
- 初识机器学习与深度学习
- ESP12f/E(8266)以及STM32串口自动烧录电路
- html图片标签img的介绍以及基本用法详解
- 2023年,给你5点小建议
- 孵化中国网络安全未来,ISC 2021创新独角兽沙盒大赛开启招募
- nc6400 在bios中打开SATA模式就会蓝屏呢
- 3分钟教会你用KaTeX在csdn博客中编辑数学公式