gulp源码分析

浅浅的花香味﹌ 2023-05-29 03:21 10阅读 0赞

# 一.整体结构分析 #

整体结构

通过在nodejs环境对源码的打印，我们最终得到的gulp实例行如下图。那么我们gulp实例上的属性和方法是如何生成的呢？

Gulp {
      domain: null,
      _events: [Object: null prototype] {},
      _eventsCount: 0,
      _maxListeners: undefined,
      _registry: DefaultRegistry { _tasks: {} },
      _settle: false,
      watch: [Function: bound ],
      task: [Function: bound task],
      series: [Function: bound series],
      parallel: [Function: bound parallel],
      registry: [Function: bound registry],
      tree: [Function: bound tree],
      lastRun: [Function: bound lastRun],
      src: [Function: bound src],
      dest: [Function: bound dest],
      symlink: [Function: bound symlink] 
    }

**(1)类的实现**

源码index.js分为三个部分，第一部分是gulp构造函数，添加实例方法，第二部分是Gulp原型方法添加，第三部分是导出gulp实例。

//第一部分是gulp构造函数，添加实例方法
    function  Gulp(){
      .......
    
    }
    //第二部分是原型方法添加
    Gulp.prototype.src=.......
    
    //第三部分是导出gulp实例
    Gulp.prototype.Gulp = Gulp;
    
    var inst = new Gulp();
    module.exports = inst;

我们知道实现一个类，通过构造函数往this对象添加实例属性和方法，或者添加原型方法，类的实例自动拥有实例属性、实例方法和原型方法。

//People类
    function People () {
      this.name = "Yorhom";
    }
    
    People.prototype.getName = function () {
     console.log(this.name);// "Yorhom"
    };
    
    var yorhom = new People();
    
    yorhom.getName()
    console.log(yorhom.name)// "Yorhom"

所以我们在构造函数中this对象定义的watch等10个方法具体指的哪些方法呢？其实它包括util.inherits(Gulp, Undertaker); 实现了undertaker原型方法tree()、task()、series()、lastRun()、parallel()、registry()的继承，然后通过prototype定义了src()、dest()、symlink()、watch()。最后要说的是 Undertaker.call(this); ，它通过Call继承实现了对Undertaker实例属性\_registry和\_settle

//https://github.com/gulpjs/undertaker，index.js
    function Undertaker(customRegistry) {
      EventEmitter.call(this);
    
      this._registry = new DefaultRegistry();
      if (customRegistry) {
        this.registry(customRegistry);
      }
    
      this._settle = (process.env.UNDERTAKER_SETTLE === 'true');
    }
    
    inherits(Undertaker, EventEmitter);
    
    
    Undertaker.prototype.tree = tree;
    
    Undertaker.prototype.task = task;
    
    Undertaker.prototype.series = series;
    
    Undertaker.prototype.lastRun = lastRun;
    
    Undertaker.prototype.parallel = parallel;
    
    Undertaker.prototype.registry = registry;
    
    Undertaker.prototype._getTask = _getTask;
    
    Undertaker.prototype._setTask = _setTask;

要单独的说一下，call()和bind()。

call用来实现继承。

//MDN文档U
    call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

bind方法创建一个函数，而且函数的this替换成当前Gulp。例如， this.watch = this.watch.bind(this); 该行代码创建了watch方法。

bind()方法创建一个新的函数，在bind()被调用时，这个新函数的this被bind的第一个参数指定，其余的参数将作为新函数的参数供调用时使用。

**(2)导出实例**

导出实例自然是为了使用gulp，我们先来看一个gulpfile.js的代码结构。

var gulp = require('gulp')
    .........
    
    gulp.task('uglifyjs', function () {
        var combined = combiner.obj([
            gulp.src('src/js/**/*.js'),
            sourcemaps.init(),
            uglify(),
            sourcemaps.write('./'),
            gulp.dest('dist/js/')
        ])
        combined.on('error', handleError)
    })
    .........
    gulp.task('default', [
        // build
        'uglifyjs',.......
        ]
    )

那么我们是通过require引入gulp的。我们已经实现了一个Gulp的类，new Gulp()获得的实例自动拥有继承的属性和方法。可是 Gulp.prototype.Gulp = Gulp; 为什么要做这个赋值呢？作用是将构造函数挂载到Gulp原型上，那么实例就能通过Gulp属性访问到构造函数了。

Gulp.prototype.Gulp = Gulp;
    
    var inst = new Gulp();
    //console.log(inst)
    module.exports = inst;

# 二.接口gulp.src()和gulp.dest() #

gulp的src和dest接口直接引用了vinyl-fs模块[https://github.com/gulpjs/vinyl-fs][https_github.com_gulpjs_vinyl-fs]。

**(1)vinyl是什么？**

首先，vinyl-fs是针对文件系统的vinyl 适配器。

那么vinyl是什么呢？

What is Vinyl?
    Vinyl is a very simple metadata object that describes a file. 
    When you think of a file, two attributes come to mind: path and contents. These are the main attributes on a Vinyl object. 
    A file does not necessarily represent something on your computer’s file system. You have files on S3, FTP, Dropbox, Box, CloudThingly.io and other services.
     Vinyl can be used to describe files from all of these sources.

vinyl是vitual file formate虚拟文件格式，用于描述一个文件。它有两个主要的属性，path属性和contents属性。每一个Vinyl实例代表一个独立的文件、目录或者symlink符号连接。

实际项目中，除了我们需要一个简洁的方式去描述一个文件之外，我们还需要访问这些文件，所以vinyl适配器对外暴露接口src()和dest()，他们都最终返回一个流(stream),src接口生产一个Vinyl 对象，dest接口消费一个Vinyl 对象。

**(2)stream流的工作方式**

流(stream)是node.js处理流式数据的抽象接口。流是可读可写的，所有的流都是EventEmitter实例。

#流的类型#
    
    Node.js 中有四种基本的流类型：
    
    Writable - 可写入数据的流（例如 fs.createWriteStream()）。
    Readable - 可读取数据的流（例如 fs.createReadStream()）。
    Duplex - 可读又可写的流（例如 net.Socket）。
    Transform - 在读写过程中可以修改或转换数据的 Duplex 流（例如 zlib.createDeflate()）。
    此外，该模块还包括实用函数 stream.pipeline()、stream.finished() 和 stream.Readable.from()。

流有缓冲(暂停)机制。

[可写流][Link 1]和[可读流][Link 2]都会在内部的缓冲器中存储数据。

当调用 [`stream.push(chunk)`][stream.push_chunk] 时，数据会被缓冲在可读流中。 如果流的消费者没有调用 [`stream.read()`][stream.read]，则数据会**保留在内部队列**中直到被消费。一旦内部的可读缓冲的总大小达到 `highWaterMark` 指定的阈值时，流会**暂时停止从底层资源读取**数据，直到当前缓冲的数据被消费。

当调用 [`writable.write(chunk)`][writable.write_chunk] 时，数据会被缓冲在可写流中。 当内部的可写缓冲的总大小小于 `highWaterMark` 设置的阈值时，调用 `writable.write()` 会返回 `true`。 一旦内部缓冲的大小达到或超过 `highWaterMark` 时，则会返回 `false`。

`stream` API 的主要目标，特别是 [`stream.pipe()`][stream.pipe]，是为了限制数据的缓冲到可接受的程度，也就是读写速度不一致的源头与目的地不会压垮内存。

**可写流**

可写流是对数据要被写入的目的地的一种抽象。
    
    可写流的例子包括：
    
    客户端的 HTTP 请求
    服务器的 HTTP 响应
    fs 的写入流
    zlib 流
    crypto 流
    TCP socket
    子进程 stdin
    process.stdout、process.stderr

当在可读流上调用 [`stream.pipe()`][stream.pipe] 方法时会发出 `'pipe'` 事件，并将此可写流添加到其目标集。

const writer = getWritableStreamSomehow();
    const reader = getReadableStreamSomehow();
    writer.on('pipe', (src) => {
      console.log('有数据正通过管道流入写入器');
      assert.equal(src, reader);
    });
    reader.pipe(writer);

**可读流**

可读流是对提供数据的来源的一种抽象。
    
    可读流的例子包括：
    
    客户端的 HTTP 响应
    服务器的 HTTP 请求
    fs 的读取流
    zlib 流
    crypto 流
    TCP socket
    子进程 stdout 与 stderr
    process.stdin
    所有可读流都实现了 stream.Readable 类定义的接口。

对于大多数用户，建议使用 `readable.pipe()`，因为它是消费流数据最简单的方式。如果开发者需要精细地控制数据的传递与产生，可以使用 `EventEmitter、` `readable.on('readable')`/`readable.read()` 或 `readable.pause()`/`readable.resume()`。

**(3)src接口代码结构以及读取实现**

function src(glob, opt) {
      var optResolver = createResolver(config, opt);
    
      if (!isValidGlob(glob)) {
        throw new Error('Invalid glob argument: ' + glob);
      }
    
      var streams = [      
         gs(glob, opt).... readContents(optResolver), .... ]; 
    
    var outputStream = pumpify.obj(streams); return toThrough(outputStream); } module.exports = src;

其他关于读取的功能添加我们本篇文章就不详细说了，只是集中在读取内容的核心代码上。

首先，创建createResolver对默认配置和传入的options(接收哪些选项，请参照[https://www.gulpjs.com.cn/docs/api/src/][https_www.gulpjs.com.cn_docs_api_src])创建了一个resolver。然后当我们通过 resolver.resolve(optionKey, \[...arguments\]) 就可以解析相关选项了。

//  libs/src/options.js 默认选项
    var config = {
      buffer: {
        type: 'boolean',
        default: true,
      },
      read: {
        type: 'boolean',
        default: true,
      },
      since: {
        type: 'date',
      },
      removeBOM: {
        type: 'boolean',
        default: true,
      },
      sourcemaps: {
        type: 'boolean',
        default: false,
      },
      resolveSymlinks: {
        type: 'boolean',
        default: true,
      },
    };
    
    module.exports = config;

然后，glob流读取 gs(glob, opt),

//glob-stream使用示例
    var gs = require('glob-stream');
     
    var readable = gs('./files/**/*.coffee', { /* options */ });
     
    var writable = /* your WriteableStream */
     
    readable.pipe(writable);

接下来，获得输出流 var outputStream = pumpify.obj(streams); pumpify的功能是组装一个流的数组成为一个Duplex流(这个在Nodejs中是可读可写的流)。如果在管道中其中一个流被关掉或者发生错误，那么所有的流都会被销毁。

pumpify
    Combine an array of streams into a single duplex stream using pump and duplexify. If one of the streams closes/errors all streams in the pipeline will be destroyed.

最后， return toThrough(outputStream); toThrough包装输出流为一个Transform流。Transform 流是在读写过程中可以修改或转换数据的 Duplex 流

to-through，Wrap a ReadableStream in a TransformStream.

所以我们看到，使用src接口得到的是一个Transform流。

**(3)dest接口代码结构以及写入实现**

mkdirpStream.obj(dirpath) 功能是确保目录存在。

fs-mkdirp-stream
    //确保在写入这个目录之前它是存在的
    
    Ensure directories exist before writing to them.

最后写入 return lead(saveStream);

//lead方法的作用
    Takes a stream to sink and returns the same stream. 
    Sets up event listeners to infer if the stream is being used as a Transform 
    or Writeable stream and sinks it on nextTick if necessary. 
    If the stream is being used as a Transform stream but becomes unpiped,
     it will be sunk. Respects pipe, on('data') and on('readable') handlers.

# 三.接口gulp.task() #

gulp中的task是继承了undertaker中的task方法。undertaker有关task的源码有个部分。

(1)lib/task.js

//task使用
    //第一种，传入函数
    const { task } = require('gulp');
    
    function build(cb) {
      // body omitted
      cb();
    }
    
    task(build);
    //第二种，第一个参数为字符串，第二个参数为function
    task('build', function(cb) {
      // body omitted
      cb();
    });

所以task.js对参数进行了判断。

(2)lib/get-task.js、lib/set-task.js

//调用的是_registry的方法
    function get(name) {
      return this._registry.get(name);
    }

lib/registry.js

它对tasks数组迭代，每次迭代运行一次setTask方法。

[https_github.com_gulpjs_vinyl-fs]: https://github.com/gulpjs/vinyl-fs
[Link 1]: http://nodejs.cn/s/9JUnJ8
[Link 2]: http://nodejs.cn/s/YuDKX1
[stream.push_chunk]: http://nodejs.cn/s/8s3paZ
[stream.read]: http://nodejs.cn/s/SpgRaa
[writable.write_chunk]: http://nodejs.cn/s/doppiK
[stream.pipe]: http://nodejs.cn/s/Ea2ZNW
[https_www.gulpjs.com.cn_docs_api_src]: https://www.gulpjs.com.cn/docs/api/src/