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 通过算法(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会员技术团队创建,用于技术分享和交流。

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏原创

教你如何用AST语法树对代码“动手脚”

作为程序猿,每天都在写代码,但是有没有想过通过代码对写好的代码”动点手脚”呢?今天就与大家分享——如何通过用AST语法树改写Java代码。 先抛一个问题:如何将...

5116
来自专栏安恒网络空间安全讲武堂

技术分享 | 谈一谈CTF中的python沙箱逃逸

0x01 前言 笔者在最近的CTF比赛中遇到了几次关于python沙箱逃逸的web题目,故此做一些总结。在阅读这篇文章之前,我相信你已经了解关于python的一...

4539
来自专栏求索之路

从零开始仿写一个抖音App——app架构更新与网络层定制

讨论1:zsh 对 bash 的支持并不是完全的,如果运行纯 bash 有时候会出问题建议不要在服务器上用。

531
来自专栏菩提树下的杨过

velocity模板引擎学习(1)

velocity与freemaker、jstl并称为java web开发三大标签技术,而且velocity在codeplex上还有.net的移植版本NVeloc...

1905
来自专栏owent

初识Rust

虽然我主要使用C++,但是最近也想学点现代化的新语言。初步想的是从golang和Rust里先选一个。

934
来自专栏好好学java的技术栈

java实现手机短信验证全过程

手机短信验证现在在各种系统可以说都是用的非常普遍的,这个可能是方便和安全性的考虑,所以才广泛的使用,这篇文章就以一个短信接口的实例,来讲解一下怎么使用短信接口。

1705
来自专栏OY写东西的地方

使用Typescript给JavaScript做静态类型检查

笔者所说的这个项目,是一个运行了接近五年的老项目,代码横跨es3到es6。而且代码风格由于项目的人员流动也各异。由于项目人数越来越多,以前留下的技术债造成的危害...

60
来自专栏PPV课数据科学社区

适用于 PHP 开发人员的 Python 基础知识

您是一名 PHP 开发人员。您在过去 五年(或更长时间)中可能一直都编写应用程序,您已经将许多想像变成了可能 — 电子商务系统、简单内容管理系统、Twitte...

33615
来自专栏Golang语言社区

说说JSON和JSONP,也许你会豁然开朗-转

今天在写底层通信框架的时候,遇到了跨域的问题;随便给不知道的童鞋们分享下基础知识。 前言   由于Sencha Touch 2这种开发模式的特性,基本...

3716
来自专栏北京马哥教育

Python WSGI详解

云豆贴心提醒,本文阅读时间7分钟 WSGI简介 WSGI的全称是Web Server Gateway Interface,这是一个规范,描述了web ser...

3665

扫码关注云+社区