本章讲解如何编写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
> gulp-prefix@1.0.0 test /root/gulp-prefix
> mocha
  gulp-prefix
    ✓ prefix test
  1 passing (18ms)

更多内容: web前端开发工具讲解