编写gulp插件

1年前 阅读 583 评论 2 赞 0

本章讲解如何编写gulp插件,这里通过实现一个简单的插件功能来一步步讲解如何编写gulp插件

gulp插件结构

  1. // 引入插件需要的包
  2. var through = require('through2');
  3. // 定义gulp插件主函数
  4. // prefix_text:调用插件传入的参数
  5. module.exports = function gulp_prefix(prefix_text){
  6. // 创建stream对象,每个文件都会经过这个stream对象
  7. var stream = through.obj(function(file, encoding, callback){
  8. // 文件经过stream时要执行代码
  9. });
  10. // 返回stream对象
  11. return stream;
  12. };

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

  1. npm init

询问你name时,可以取名为:gulp-prefix,执行成功后,package.json的内容为:

  1. {
  2. "name": "gulp-prefix",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "echo \"Error: no test specified\" && exit 1"
  8. },
  9. "author": "",
  10. "license": "ISC"
  11. }

在本地创建一个插件入口文件index.js文件,内容为:

  1. var through = require('through2');
  2. module.exports = function gulp_prefix(prefix){
  3. if(!prefix){
  4. prefix = "";
  5. }
  6. var prefix = new Buffer(prefix);
  7. var stream = through.obj(function(file, encoding, callback){
  8. // 如果file类型不是buffer 退出不做处理
  9. if(!file.isBuffer()){
  10. return callback();
  11. }
  12. // 将字符串加到文件数据开头
  13. file.contents = Buffer.concat([prefix, file.contents]);
  14. // 确保文件会传给下一个插件
  15. this.push(file);
  16. // 告诉stream引擎,已经处理完成
  17. callback();
  18. });
  19. return stream;
  20. };

现在插件的目录结构为

  1. .
  2. ├── index.js
  3. ├── package.json

现在可以使用该插件了,将插件复制到你的gulp项目下node_modules/gulp-prefix目录中,编写gulpfile.js

  1. var gulp = require('gulp'),
  2. prefix = require('gulp-prefix');
  3. gulp.task("default", function(){
  4. gulp.src("src/*.js")
  5. .pipe(prefix("prefix data"))
  6. .pipe(gulp.dest("js"));
  7. });

运行

  1. gulp

可以看到所有的js文件内容的前面都加上prefix data字符串

插件测试

像很多项目需要单元测试一样,我们在开发gulp插件时,也需要有测试功能,接下来我教大家如何测试刚刚写的gulp-prefix插件。

很多gulp插件使用的测试工具是mocha,首先将package.jsonscripts字段的test值修改为mocha,修改后package.json为:

  1. {
  2. "name": "gulp-prefix",
  3. "version": "1.0.0",
  4. "description": "",
  5. "main": "index.js",
  6. "scripts": {
  7. "test": "mocha"
  8. },
  9. "author": "",
  10. "license": "ISC"
  11. }

这样当我们执行npm test,就能运行mocha测试工具。现在在本地创建一个测试脚本test.js

  1. var assert = require('assert');
  2. var File = require('vinyl');
  3. var prefix = require('./');
  4. describe('gulp-prefix', function() {
  5. it('prefix test', function(done) {
  6. // 创建一个文件
  7. var file = new File({
  8. contents: new Buffer('file data')
  9. });
  10. // 创建一个 prefix流
  11. var stream = prefix('prefix ');
  12. // 将文件写入prefix流中
  13. stream.write(file);
  14. // 等文件重新出来a
  15. stream.once('data', function(file) {
  16. // 检查内容是否一致
  17. assert.equal(file.contents.toString('utf8'), 'prefix file data');
  18. done();
  19. });
  20. });
  21. });

安装测试需要的包

  1. npm install assert mocha through2 vinyl --save-dev

运行测试

  1. [root@localhost gulp-prefix]# npm test
  2. > gulp-prefix@1.0.0 test /root/gulp-prefix
  3. > mocha
  4. gulp-prefix
  5. prefix test
  6. 1 passing (18ms)
你的支持将鼓励作者继续创作

评论(2)

引用内容:

创建stream对象的方
9个月前

引用内容:

数需要返回一个stream对象。创建
柴君 1年前回复