Gulp 原理

🌙
手机阅读
本文目录结构
axihe

原理

gulp 借鉴了 Unix 的 管道(pipe) 思想,处理文件采用流的方式,上一步的输出作为下一步的输入,中途不会在磁盘写入文件,仅在 dest 时输出文件,所以非常快速高效,原理如下图。

https://a.axihe.com/npm/gulp/chrome_ctu2BrZhEG.png

https://a.axihe.com/npm/gulp/gulp-pipe.jpg

stream 的核心是:上一级的输出是下一级的输入

gulp 提供了 src 及 dest 方法分别来进行文件读入、输出操作,同时提供了 pipe 管道方法来链式执行其他操作。

Gulp 的组成模块

Gulp 由许多小模块组成,这些模块被拉到一起以实现内聚性工作。通过在小模块中使用 semver,我们可以在不发布 gulp 新版本的情况下发布 bug 修复和特性。

如果遇到问题,请使用 npm update 命令更新当前模块。如果问题仍然存在,则在单个项目存储库上打开一个 issue。

模块作用
gulp-cli与gulp交互的命令行界面;gulp,gulp copy
undertaker任务注册系统,实现 task 的功能,比如注册copy任务
bach任务编排使用 series() and parallel()
last-run跟踪任务的最后运行时间
vinyl虚拟文件对象
vinyl-fsvinyl 本地文件系统的适配器
vinyl-sourcemap内置 sourcemap 支持
glob-watcher文件观察器

Vinyl

Vinyl 是描述文件的元数据对象。

Vinyl 实例的主要属性是文件系统中文件核心的 pathcontents 核心方面。Vinyl 对象可用于描述来自多个源的文件(本地文件系统或任何远程存储选项上)。

srcdest

Vinyl 提供了一种描述文件的方法,但是需要一种访问这些文件的方法。使用 Vinyl 适配器访问每个文件源。

适配器暴露了:

  • 一个签名为 src(globs, [options]) 的方法,返回一个生成 Vinyl 对象的流。
  • 一个带有签名为 dest(folder, [options]) 的方法,返回一个使用 Vinyl 对象的流。
  • 任何特定于其输入 / 输出媒体的额外方法
    • 例如 vinyl-fs 所提供的symlink 方法 。它们应该总是返回streams,产生 Vinyl 对象。

tasks

每个 gulp 任务都是一个异步 JavaScript 函数,它要么接受一个错误优先回调,要么返回一个流、promise、事件发射器、子进程或 observable。由于一些平台限制,不支持同步任务。

有关更详细的解释,请参见Gulp task 详解

文件匹配规则

glob 是一串文字或通配符,如 *, **, 或 !,用于匹配文件路径。Globbing 是使用一个或多个 globs 在文件系统上定位文件的操作。

如果您没有使用globs的经验,请参阅。Gulp 匹配文件的方法详解

Glob base

glob base (有时称为 glob parent) 是 glob 字符串中任何特殊字符之前的路径段。因此,/src/js/**.js 的 blob base 是 /src/js/。所有匹配 glob 的路径都保证共享 glob base——该路径段不能是可变的。

src() 生成的 Vinyl 实例是用 glob base 集作为它们的 base 属性构造的。当使用 dest() 写入文件系统时,将从输出路径中删除 base ,以保留目录结构。

有关更深入的信息,请参阅 glob-parent 库。

文件系统统计数据

文件元数据作为 Nodejs 的 fs.Stats 实例提供。

它是 Vinyl 实例的 stat 属性,并在内部用于确定 Vinyl 对象是否表示目录或符号链接(symbolic link)。当写入文件系统时,权限和时间值将从 Vinyl 对象的 stat 属性同步。

文件系统模式

文件系统模式决定文件的权限。文件系统上的大多数文件和目录将具有相当宽松的模式,允许 gulp 代表您读取 / 写入 / 更新文件。

默认情况下,gulp 将创建与运行进程具有相同权限的文件,但是您可以通过 src()dest() 中的选项配置模式。如果您遇到权限 (EPERM) 问题,请检查文件上的模式。


AXIHE / 精选资源

浏览全部教程

面试题

学习网站

前端培训
自己甄别

前端书籍

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang