gulp源码解析（二）—— vinyl-fs

关于作者：

蓝邦珏，腾讯前端工程师，15年加入腾讯SNG增值产品部，期间主要负责过手Q阅读、手Q动漫项目的业务开发。业余喜欢折腾前端新技术和写文章。 

上期文章：

gulp源码解析（一）—— Stream详解

gulp 之所以在性能上好于 grunt，主要是因为有了 Stream 助力来做数据的传输和处理。那么我们不难猜想出，在 gulp 的任务中，gulp.src 接口将匹配到的文件转化为可读（或 Duplex/Transform）流，通过 .pipe 流经各插件进行处理，最终推送给 gulp.dest 所生成的可写（或 Duplex/Transform）流并生成文件。

本文将追踪 gulp（v4.0）的源码，对上述猜想进行验证。

为了分析源码，我们打开 gulp 仓库下的入口文件 index.js，可以很直观地发现，几个主要的 API 都是直接引用 vinyl-fs 模块上暴露的接口的：

因此了解 vinyl-fs 模块的作用，便成为掌握 gulp 工作原理的关键之一。需要留意的是，当前 gulp4.0 所使用的 vinyl-fs 版本是 v2.0.0。

vinyl-fs 其实是在 vinyl 模块的基础上做了进一步的封装，在这里先对它们做个介绍：

一. Vinyl

Vinyl 可以看做一个文件描述器，通过它可以轻松构建单个文件的元数据（metadata object）描述对象。依旧是来个例子简洁明了：

上述代码会打印两个File文件对象：

简而言之，Vinyl 可以创建一个文件描述对象，通过接口可以取得该文件所对应的数据（Buffer类型）、cwd路径、文件名等等：

打印结果：

更全面的 API 请参考官方描述文档。

对于完整的 Vinnyl 源码注解，可以到如下地址查阅：

https://github.com/VaJoy/stream/blob/master/vinyl.js

二. Vinyl-fs

Vinyl 虽然可以很方便地来描述一个文件、设置或获取文件的内容，但还没能便捷地与文件系统进行接入。

我的意思是，我们希望可以使用通配符的形式来简单地匹配到咱想要的文件，把它们转为可以处理的 Streams，做一番加工后，再把这些 Streams 转换为处理完的文件。

Vinyl-fs 就是实现这种需求的一个 Vinyl 适配器，我们看看它的用法：

如上方代码所示，Vinyl-fs 的 .src 接口可以匹配一个通配符，将匹配到的文件转为 Vinyl Stream，而 .dest 接口又能消费这个 Stream，并生成对应文件。

这里需要先补充一个概念 —— .src 接口所传入的“通配符”有个专有术语，叫做 GLOB，我们先来聊聊 GLOB。

GLOB 可以理解为我们给 gulp.src 等接口传入的第一个 pattern 参数的形式，例如“./js/**/*.js”，另外百度百科的“glob模式”描述是这样的：

所谓的 GLOB 模式是指 shell 所使用的简化了的正则表达式：
⑴ 星号（*）匹配零个或多个任意字符；
⑵ [abc]匹配任何一个列在方括号中的字符（这个例子要么匹配一个 a，要么匹配一个 b，要么匹配一个 c）；
⑶ 问号（?）只匹配一个任意字符；
⑷ 如果在方括号中使用短划线分隔两个字符，表示所有在这两个字符范围内的都可以匹配（比如 [0-9] 表示匹配所有 0 到 9 的数字）。

在 vinyl-fs 中，是使用 glob-stream <v5.0.0>通过算法（minimatch）来解析 GLOB 的，它会拿符合上述 GLOB 模式规范的 pattern 参数去匹配相应的文件：

而 glob-stream 又是借助了 node-glob 来匹配文件列表的：

打印结果：

glob-stream 的全部源码注解可以到 https://github.com/VaJoy/stream/blob/master/glob-stream.js 进行查阅，鉴于源码字数太多不便阅读，这里仅贴下它的执行流程图：

留意通过 glob-stream 创建的流中，所写入的数据格式：

是不像极了 Vinyl 创建文件对象时可传入的配置。

我们回过头来专注 vinyl-fs 的源码，其入口文件如下：

下面分别对这三个对外接口（也直接就是 gulp 的对应接口）进行分析。

2.1 gulp.src

该接口文件为 lib/src/index.js，代码量不多，但引用的模块不少。

主要功能是使用 glob-stream 匹配 GLOB 并创建 glob 流，通过 through2 写入 Object Mode 的 Stream 去，把数据初步加工为 Vinyl 对象，再按照预设项进行进一步加工处理，最终返回输出流：

该模块的源码注解可以到 https://github.com/VaJoy/stream/blob/master/gulp.src.js 进行查阅。

这里有个 symlink 的概念 —— symlink 即  symbolic link，也称为软链（soft link），它使用了其它文件或文件夹的链接来指向一个文件。一个 symlink 可以链接任何电脑上的任意文件或文件夹。在 Linux/Unix 系统上，symlink 可以通过 ln 指令来创建；在 windows 系统上可以通过 mklink 指令来创建。

更多 symlink 的介绍建议参考 wiki —— https://en.wikipedia.org/wiki/Symbolic_link。

2.2 gulp.dest

该接口文件为 lib/dest/index.js，其主要作用自然是根据 src 接口透传过来的输出流，生成指定路径的目标文件/文件夹：

此处也有一点很值得了解的地方 —— 当输出文件为 Buffer 类型时（大部分情况下），使用的是异步的 fs.writeFile 接口，而在 grunt 中使用的是阻塞的 fs.writeFileSync 接口（参考 grunt/file.js），这是即使 gulp 默认使用 Buffer 传递文件内容，但速度相比 grunt 依旧会快很多的重要原因。

接前文的流程图：

至此我们就搞清楚了 gulp 的 src 和 dest 是怎样运作了。另外 gulp/vinyl-fs 还有一个 symlink 接口，其功能与 gulp.dest 是一样的，只不过是专门针对 symlink 的方式来处理（使用场景较少），有兴趣的同学可以自行阅读其入口文件 lib/symlink/index.js。

本文涉及的所有示例代码和源码注释文件，均存放在我的仓库（https://github.com/VaJoy/stream/）上，可自行下载调试。共勉~

关于我们：

小时光茶社（Tech Teahouse），由腾讯QQ会员技术团队创建，用于技术分享和交流。

欢迎扫描二维码，关注我们。