编写gulp插件

本章讲解如何编写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.jsonscripts字段的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前端开发工具讲解

你可能感兴趣的:(编写gulp插件)