首页 > 代码库 > gulp.src()内部实现探究

gulp.src()内部实现探究

写在前面

本来是想写个如何编写gulp插件的科普文的,突然探究欲又发作了,于是就有了这篇东西。。。翻了下源码看了下gulp.src()的实现,不禁由衷感慨:肿么这么复杂。。。

进入正题

首先我们看下gulpfile里面的内容是长什么样子的,很有express中间件的味道是不是~
我们知道.pipe()是典型的流式操作的API。很自然的,我们会想到gulp.src()这个API返回的应该是个Stream对象(也许经过层层封装)。本着一探究竟的目的,花了点时间把gulp的源码大致扫了下,终于找到了答案。

gulpfile.js

var gulp = require(‘gulp‘),    preprocess = require(‘gulp-preprocess‘);gulp.task(‘default‘, function() {    gulp.src(‘src/index.html‘)        .pipe(preprocess({USERNAME:‘程序猿小卡‘}))        .pipe(gulp.dest(‘dest/‘));});

提前剧透

此处有内容剧透,如有对剧透不适者,请自行跳过本段落。。。

gulp.src() 的确返回了定制化的Stream对象。可以在github上搜索ordered-read-streams这个项目。

大致关系是:
ordered-read-streams --> glob-stream --> vinyl-fs --> gulp.src()

探究之路

首先,我们看下require(‘gulp‘)返回了什么。从gulp的源码来看,返回了Gulp对象,该对象上有srcpipedest等方法。很好,找到了我们想要的src方法。接着往下看
参考:https://github.com/gulpjs/gulp/blob/master/index.js#L62

gulp/index.js

var inst = new Gulp();module.exports = inst;

从下面的代码可以看到,gulp.src方法,实际上是vfs.src。继续
参考:https://github.com/gulpjs/gulp/blob/master/index.js#L25

gulp/index.js

var vfs = require(‘vinyl-fs‘);// 省略很多行代码Gulp.prototype.src = http://www.mamicode.com/vfs.src;>

接下来我们看下vfs.src这个方法。从vinyl-fs/index.js可以看到,vfs.src实际是vinyl-fs/lib/src/index.js
参考:https://github.com/wearefractal/vinyl-fs/blob/master/index.js

vinyl-fs/index.js

‘use strict‘;module.exports = {  src: require(‘./lib/src‘),  dest: require(‘./lib/dest‘),  watch: require(‘glob-watcher‘)};

那么,我们看下vinyl-fs/lib/src/index.js。可以看到,gulp.src()返回的,实际是outputStream这货,而outputStreamgs.create(glob, options).pipe()获得的,差不多接近真相了,还有几步而已。
参考:https://github.com/wearefractal/vinyl-fs/blob/master/lib/src/index.js#L37

vinyl-fs/lib/src/index.js

var defaults = require(‘lodash.defaults‘);var through = require(‘through2‘);var gs = require(‘glob-stream‘);var File = require(‘vinyl‘);// 省略非重要代码若干行function src(glob, opt) {  // 继续省略代码  var globStream = gs.create(glob, options);  // when people write to use just pass it through  var outputStream = globStream    .pipe(through.obj(createFile))    .pipe(getStats(options));  if (options.read !== false) {    outputStream = outputStream      .pipe(getContents(options));  }  // 就是这里了  return outputStream    .pipe(through.obj());}

我们再看看glob-stream/index.js里的create方法,最后的return aggregate.pipe(uniqueStream);。好的,下一步就是真相了,我们去ordered-read-streams这个项目一探究竟。
参考:https://github.com/wearefractal/glob-stream/blob/master/index.js#L89

glob-stream/index.js

var through2 = require(‘through2‘);var Combine = require(‘ordered-read-streams‘);var unique = require(‘unique-stream‘);var glob = require(‘glob‘);var minimatch = require(‘minimatch‘);var glob2base = require(‘glob2base‘);var path = require(‘path‘);// 必须省略很多代码// create 方法create: function(globs, opt) {    // 继续省略代码// create all individual streams    var streams = positives.map(function(glob){      return gs.createStream(glob, negatives, opt);    });    // then just pipe them to a single unique stream and return it    var aggregate = new Combine(streams);    var uniqueStream = unique(‘path‘);    // TODO: set up streaming queue so items come in order    return aggregate.pipe(uniqueStream);

真相来了,我们看下ordered-read-streams的代码,可能刚开始看不是很懂,没关系,知道它实现了自己的Stream就可以了(nodejs是有暴露相应的API让开发者对Stream进行定制的),具体可参考:http://www.nodejs.org/api/stream.html#stream_api_for_stream_implementors

代码来自:https://github.com/armed/ordered-read-streams/blob/master/index.js

ordered-read-streams/index.js

function OrderedStreams(streams, options) {  if (!(this instanceof(OrderedStreams))) {    return new OrderedStreams(streams, options);  }  streams = streams || [];  options = options || {};  if (!Array.isArray(streams)) {    streams = [streams];  }  options.objectMode = true;  Readable.call(this, options);  // stream data buffer  this._buffs = [];  if (streams.length === 0) {    this.push(null); // no streams, close    return;  }    streams.forEach(function (s, i) {    if (!s.readable) {      throw new Error(‘All input streams must be readable‘);    }    s.on(‘error‘, function (e) {      this.emit(‘error‘, e);    }.bind(this));    var buff = [];    this._buffs.push(buff);    s.on(‘data‘, buff.unshift.bind(buff));    s.on(‘end‘, flushStreamAtIndex.bind(this, i));  }, this);}

参考:https://github.com/armed/ordered-read-streams/blob/master/index.js

写在后面

兜兜转转一大圈,终于找到了gulp.src()的源头,大致流程如下,算是蛮深的层级。代码细节神马的,有兴趣的同学可以深究一下。

ordered-read-streams --> glob-stream --> vinyl-fs --> gulp.src()