如何制作一个gulp生态插件？gulp插件实战案例开发

导读

在使用gulp构建前端项目的时候，可能会需要一些功能，但这些功能目前没有gulp插件实现，所以可能需要自己写一个插件来满足开发使用。但是，如何开发一款gulp插件呢？
首先我推荐大家在开发前先看一下官网的插件开发的规范：
https://www.gulpjs.com.cn/docs/writing-a-plugin/

确定开发任务

这次需要开发一个给管道中的文件添加统一后缀文本内容的功能

构建插件

1. 首先初始化一个package.json

npm init

2. 修改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"
}

3. 在当前目录新建一个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;
}

4. 将该目录下的index.js 和 package.json 拷贝在gulpfile.js同目录下的node_modules/gulp-suffix/中；

5. 编辑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 )

6. 命令面板打印如下：

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测试我们开发的插件

1. 安装所需要的依赖

cnpm install assert mocha through2 vinyl --save-dev

2. 在插件开发目录中，新建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();
      });

    });
});

3. 修改package.json中的npm test命令：

"scripts": {
    "test": "mocha"
  },

4. 执行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)                                                                                         

– 开发完成 –