虽然现在在web开发的领域大家进行打包模块相关的操作的时候大部分都是在使用webpack，但是在小程序出来之后，因为小程序天生多页面，支持模块化等操作，但是在工程化方面的内容不足，因此gulp相比webpack反而因为简单好用，成为了现在在做小程序工程化的主要工具，即使是官方的维护，很多也是依赖了gulp来实现的，同时，gulp可以说是对node的流的使用到达了一个炉火纯青的地步，学习gulp的源代码可以很好的帮助我们学习流相关的知识，当然在这里我们暂时先不去看gulp的源代码，而是实现一个简单的gulp插件。
px转rpx插件
在做小程序的工程化期间，我们发现虽然可以通过gulp-less插件，可以帮助我们将less文件转换成css文件，然后修改css的后缀名为wxss,就可以实现less转wxss了。但是并没有办法将px自动转化成rpx。因此我们可以做一个插件来自动实现这样的工作
思路分析
其实思路是很简单的
gulp处理的是文件流
文件流经过插件的层层封装改造。最后经由dest函数最终输出一个新的文件
因此，我们只需要获取到gulp-less转化的文件流，找到里面的
数字px
将其转化成
数字*转换率rpx
这样就可以实现px转成rpx了。就不需要我们再去手动的计算rpx的值了，当然我们也可以给出一个默认值
插件编写--文档阅读
当我们需要编写一个插件的时候,我们可以参考
gulp本身的官方文档
如何编写一个gulp插件
我们先来看一个简单的gulp pulgin的例子
这个例子是在关于buffer的使用这里出现的
通过这个例子我们可以看到，一个gulp插件到底做了什么事情
var through = require('through2');
var gutil = require('gulp-util');
var PluginError = gutil.PluginError;
// 常量
const PLUGIN_NAME = 'gulp-prefixer';
// 插件级别的函数（处理文件）
function gulpPrefixer(prefixText) {
if (!prefixText) {
throw new PluginError(PLUGIN_NAME, 'Missing prefix text!');
}
prefixText = new Buffer(prefixText); // 提前分配
// 创建一个 stream 通道，以让每个文件通过
var stream = through.obj(function(file, enc, cb) {
if (file.isStream()) {
this.emit('error', new PluginError(PLUGIN_NAME, 'Streams are not supported!'));
return cb();
}
if (file.isBuffer()) {
file.contents = Buffer.concat([prefixText, file.contents]);
}
// 确保文件进入下一个 gulp 插件
this.push(file);
// 告诉 stream 引擎，我们已经处理完了这个文件
cb();
});
// 返回文件 stream
return stream;
};
// 导出插件主函数
module.exports = gulpPrefixer;
使用方式
var gulp = require('gulp');
var gulpPrefixer = require('gulp-prefixer');
gulp.src('files/**/*.js')
.pipe(gulpPrefixer('prepended string'))
.pipe(gulp.dest('modified-files'));
这个插件做的事情非常的简单，而且也很单一，在gulp的导览文档中提到了
你的plugin应该只做一件事情，并且把这个事情做好
这个插件做的事情非常的简单
只不过是给文件在最开始的时候添加一个前缀罢了。
接下来我们分析一个这个文件
这个插件的返回
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);
});
它返回了一个through.obj的执行结果
那么through.obj的执行结果是什么呢?
通过深入源代码
我们找到了对应的声明文件
function obj(transform?: TransformFunction, flush?: FlushCallback): stream.Transform;
返回的是一个 stream.Transform
这个是一个转换流，他会对输入进行转换然后进行输出,
总之，我们知道gulp插件做的事情，其实就是对输入的内容进行处理,一般是进行一些转换操作，新增删除或者改写，最后输出新的内容。
那么问题来了，输入的内容怎么获得？怎么输出内容?
观察源代码我们可以知道
through.obj接受了一个函数
这个函数的第一个参数file，这就是返回的内容的，但是我们要注意的是
它可能是Buffer，也可能呢是Stream
第二个函数enc，表示的是编码，例如utf8
而第三个就是回调函数了
很明显，他接受两个参数，第一个是error，而第二个就是转化后的file
而PluginError这些包是用来进行错误处理的
通过这个例子，我们就知道怎么去创建一个插件了
接下来我们分析我们要创建的插件
转化px到rpx
首先我们明确一下思路
思路很简单
- 获取到原来的内容，这里我们已经提到过了
- 将file这种Buffer或者Stream转换成string
- 使用正则表达式处理string
- 将string转会Buffer
- 将转化好的file交给cb函数
- 注意错误的处理
- 处理默认值,使得插件更加的简单好用
代码如下
// through2 is a thin wrapper around node transform streams
var through = require('through2');
var PluginError = require('plugin-error');
// Consts
const PLUGIN_NAME = 'gulp-transform_rpx';
// Plugin level function(dealing with files)
function gulpPrefixer (multiple = 2) {
if (typeof multiple !== 'number') {
throw new PluginError(PLUGIN_NAME, 'multiple must is number!');
}
// Creating a stream through which each file will pass
return through.obj(function (file, enc, cb) {
if (file.isNull()) {
// return empty file
return cb(null, file);
}
if (file.isBuffer()) {
const fileStr = file.contents.toString();
const f2 = fileStr.replace(/\d+px/g, (item) => {
const newS = item.split('px')[0] * multiple + 'rpx';
return newS;
});
// 将所有的px单位都转化成rpx单位
file.contents = Buffer.from(f2);
}
if (file.isStream()) {
// file.contents = file.contents.pipe(prefixStream(newPrefixText));
}
cb(null, file);
});
}
// Exporting the plugin main function
module.exports = gulpPrefixer;
这样一个gulp插件就完成了
对于错误处理我们使用了官方推荐的一个插件
plugin-error
当然你可能还在纠结Stream.Transform的问题
假如你不想使用though2来进行插件编写得话
可以参考一下gulp-rename的源代码
它可以用来进行重命名工作
网友评论