导读
在使用gulp
构建前端项目的时候,可能会需要一些功能,但这些功能目前没有gulp
插件实现,所以可能需要自己写一个插件来满足开发使用。但是,如何开发一款gulp
插件呢?
首先我推荐大家在开发前先看一下官网的插件开发的规范:
https://www.gulpjs.com.cn/docs/writing-a-plugin/
确定开发任务
这次需要开发一个给管道中的文件添加统一后缀文本内容的功能
构建插件
- 首先初始化一个
package.json
npm init
- 修改
package.json
如下:
{
"name": "gulp-suffix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}
- 在当前目录新建一个
index.js
文件,主要实现文本后缀的功能, 编辑如下:
var through = require("through2")
module.exports = function(suffix){
if(!suffix){
suffix = "";
}
var suffix = new Buffer(suffix);
var stream = through.obj(function(file, encoding, callback){
// 如果file类型不是buffer 退出不做处理
if(!file.isBuffer()){
return callback();
}
// 将字符串加到文件数据末尾
file.contents = Buffer.concat([file.contents, suffix]);
// 确保文件会传给下一个插件
this.push(file);
// 告诉stream引擎,已经处理完成
callback();
});
return stream;
}
-
将该目录下的
index.js
和package.json
拷贝在gulpfile.js
同目录下的node_modules/gulp-suffix/
中; -
编辑
gulpfile.js
如下:
let gulp = require("gulp");
//let gulpLoadPlugins = require('gulp-load-plugins');
//let $ = gulpLoadPlugins({lazyload: true, rename:{}});
let gsuffix = require("gulp-suffix")
let del = require("del")
const clear = (done) => {
del.sync(['./dist/newjade/*','!./dist/newjs','./dist/newcss/*','./dist/newcss'])
done()
}
const suffix = (done) => {
gulp.src(["./js/*.js"])
.pipe(gsuffix("\n/*哈哈哈-hahahaha*/"))
.pipe(gulp.dest("./dist/newjs/"))
done()
}
exports.default = gulp.series( clear, suffix )
- 命令面板打印如下:
D:\me\gulp\gulp-test (master -> origin) (<no name>@1.0.0)
λ gulp
[14:04:46] Using gulpfile D:\me\gulp\gulp-test\gulpfile.js
[14:04:46] Starting 'default'...
[14:04:46] Starting 'clear'...
[14:04:46] Finished 'clear' after 11 ms
[14:04:46] Starting 'suffix'...
[14:04:46] Finished 'suffix' after 15 ms
[14:04:46] Finished 'default' after 34 ms
测试插件
在插件开发完成,确保功能基本可以使用通过后,就需要使用mocha
测试我们开发的插件
- 安装所需要的依赖
cnpm install assert mocha through2 vinyl --save-dev
- 在插件开发目录中,新建
test.js
文件,编辑如下:
var assert = require("assert");
var File = require("vinyl");
var suffix = require("./");
describe('gulp-suffix', function() {
it('suffix test', function(done) {
// 创建一个文件
var file = new File({
contents: new Buffer('file data')
});
// 创建一个 suffix流
var stream = suffix(' suffix');
// 将文件写入suffix流
stream.write(file);
// 等文件重新出来
stream.once('data', function(file) {
// 检查内容是否一致
assert.equal(file.contents.toString('utf8'), 'file data suffix');
done();
});
});
});
- 修改
package.json
中的npm test
命令:
"scripts": {
"test": "mocha"
},
- 执行
mocha
测试命令:
D:\me\gulp\gulp-test\plugin\gulp-suffix (master -> origin) ([email protected])
λ npm test
> [email protected] test D:\me\gulp\gulp-test\plugin\gulp-suffix
> mocha
gulp-suffix
(node:21220) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Ple
instead.
√ suffix test
1 passing (37ms)