本章讲解如何编写gulp插件，这里通过实现一个简单的插件功能来一步步讲解如何编写gulp插件。
gulp插件结构
// 引入插件需要的包
var through = require('through2');
// 定义gulp插件主函数
// prefix_text：调用插件传入的参数
module.exports = function gulp_prefix(prefix_text){
// 创建stream对象，每个文件都会经过这个stream对象
var stream = through.obj(function(file, encoding, callback){
// 文件经过stream时要执行代码
});
// 返回stream对象
return stream;
};
gulp插件的主函数需要返回一个stream对象。创建stream对象的方法有很多种，这里我们使用through.obj()来创建一个stream对象。
调用through.obj()时传入的函数参数最终会覆盖stream._transform函数，这里有必要讲解下这个函数怎么使用。
transform._transform(file, encoding, callback)
- file：
stream接收到的文件数据，该文件类型有三种：
stream：流数据，可以用file.isStream()判断
buffer：二进制数据，gulp.src读取文件默认是这个类型，可以用file.isBuffer()判断
null：为空，表示没有数据，可以用file.isNull()判断 - encoding：表示编码方式，一般不用，可以不管
- callback(error,]data)：回调函数，执行完代码后都要调用这个函数，告诉
stream引擎，我们已经处理完了；
error：错误信息；可省略。
data：文件数据，可以传入file参数，或者undefined；可省略。
好了，gulp插件的结构就是这么简单，现在我们开始编写一个简单的插件：gulp-prefix。
开始编写gulp插件
现在我们实现一个能在每个文件开头加上一段字符串功能的gulp插件，写插件之前先创建一个package.json
npm init
询问你name时，可以取名为：gulp-prefix，执行成功后，package.json的内容为：
{
"name": "gulp-prefix",
"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 gulp_prefix(prefix){
if(!prefix){
prefix = "";
}
var prefix = new Buffer(prefix);
var stream = through.obj(function(file, encoding, callback){
// 如果file类型不是buffer 退出不做处理
if(!file.isBuffer()){
return callback();
}
// 将字符串加到文件数据开头
file.contents = Buffer.concat([prefix, file.contents]);
// 确保文件会传给下一个插件
this.push(file);
// 告诉stream引擎，已经处理完成
callback();
});
return stream;
};
现在插件的目录结构为
.
├── index.js
├── package.json
现在可以使用该插件了，将插件复制到你的gulp项目下node_modules/gulp-prefix目录中，编写gulpfile.js：
var gulp = require('gulp'),
prefix = require('gulp-prefix');
gulp.task("default", function(){
gulp.src("src/*.js")
.pipe(prefix("prefix data"))
.pipe(gulp.dest("js"));
});
运行
gulp
可以看到所有的js文件内容的前面都加上prefix data字符串
插件测试
像很多项目需要单元测试一样，我们在开发gulp插件时，也需要有测试功能，接下来我教大家如何测试刚刚写的gulp-prefix插件。
很多gulp插件使用的测试工具是mocha，首先将package.json中scripts字段的test值修改为mocha，修改后package.json为：
{
"name": "gulp-prefix",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "mocha"
},
"author": "",
"license": "ISC"
}
这样当我们执行npm test，就能运行mocha测试工具。现在在本地创建一个测试脚本test.js：
var assert = require('assert');
var File = require('vinyl');
var prefix = require('./');
describe('gulp-prefix', function() {
it('prefix test', function(done) {
// 创建一个文件
var file = new File({
contents: new Buffer('file data')
});
// 创建一个 prefix流
var stream = prefix('prefix ');
// 将文件写入prefix流中
stream.write(file);
// 等文件重新出来a
stream.once('data', function(file) {
// 检查内容是否一致
assert.equal(file.contents.toString('utf8'), 'prefix file data');
done();
});
});
});
安装测试需要的包
npm install assert mocha through2 vinyl --save-dev
运行测试
[root@localhost gulp-prefix]# npm test
> [email protected] test /root/gulp-prefix
> mocha
gulp-prefix
✓ prefix test
1 passing (18ms)
更多内容: web前端开发工具讲解