Gulp流控制

Posted by Sir0xb on 2016-01-31 23:38:00 +0800

为了演示流控制,简单实现了注入插件 gulp-aop

先看下 gulp-aop 注入插件的用法

gulp = require "gulp"
concat = require "gulp-concat"
aop = require "gulp-aop"
 
gulp.task "default"->
    gulp.src ["test/a.js""test/b.js"]
    .pipe concat "t.min.js"
    .pipe aop
        header: -> console.log 'Inject to the head'
        footer: -> console.log 'Inject to the end'
    .pipe gulp.dest "./test"

了解 gulp 流控制之前先了解下 nodeJS 的流

 

nodeJS 四种流

nodeJS里有四种类型的流:Readable,Writable,Duplex,Transform

Readable: 可读流

Writable: 可写流

Duplex: 双工流

Transform: 转换流

跟 Gulp 相关的主要是转换流

gulp 流控制一般用如下两种方式

 

流截获方式一:

var through = require('through-gulp');
 
module.exports = function () {
    var stream = through(function(file, encoding, callback) {
        var sourceStr = file.contents.toString();
 
        // 这里可以对代码进行处理
 
        file.contents = new Buffer(sourceStr);
 
        // 再往管道中注入修改后的内容
        this.push(file);
 
        callback();
    });
 
    stream.on("end", function () {
        // 这里可以做些收尾工作
    });
 
    return stream;
};

 

流截获方式二:

var through = require('through2');
var fs = require("fs");
 
module.exports = function (opt) {
    var aopHeader = "(" + (opt.header || function(){}).toString() + "());";
    var aopFooter = "(" + (opt.footer || function(){}).toString() + "());";
 
    function bufferContents(file, encoding, callback) {
        if (file.isNull()) {
            this.push(file);
            return callback();
        }
 
        if (file.isStream()) {
            this.push(file);
            return callback();
        }
 
        if (file.isBuffer()) {
            file.contents = new Buffer(aopHeader + file.contents.toString('utf8') + aopFooter);
        }
 
        this.push(file);
 
        callback();
    }
 
    function endStream(callback) {
        // 这里可以做些收尾工作
        callback();
    }
 
    return through.obj(bufferContents, endStream);
};

编写自己的 Gulp 插件,流控制是基础。


Copyright © 2022, Built with Gatsby