135前端 | Gulp 基础与原理 _ BlueSun

Posted 2021-04-08 前端读者

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了135前端 | Gulp 基础与原理 _ BlueSun相关的知识，希望对你有一定的参考价值。

最近在折腾gulp，来篇基础文章理理 ~

Gulp 概述

Gulp 是基于 NodeJS 的项目，一个用作自动化构建的工具，业界一般用来建造前端的工作流。

它的核心原理其实很简单，最主要是通过各种 Transform Stream 来实现文件的处理，然后再进行输出。Transform Streams 是 NodeJS Stream 的一种，是可读又可写的，它会对传给它的对象做一些转换的操作。

文件输入 → Gulp 插件处理 → 文件输出

原则上，gulp 可以针对文件做任何有趣、有创造力事情。而自动化构建，只是大家主要比较喜欢使用的方向。

Gulp 的特点：

自动化 - Gulp 为你的工作流而服务，自动运行那些费事费力任务。
平台透明 - Gulp 被集成到各种 IDE 中，并且除了 NodeJS 之外，其他如 php、.NET、Java 平台都可以使用 Gulp。
强大生态系统 - 你可以使用 npm 上 2000+ 的插件来构造你的工作流。
简单 - Gulp 只提供几个 API，这可以很快地学习和上手。

使用 Gulp

安装

// 全局安装 Gulp 命令行工具
$ npm install gulp-cli -g 

// 在项目中，作为 devDependencies 依赖安装 gulp复制代码
$ npm install gulp -D

Gulpfile.js

在使用 CLI 工具的时候，会执行该文件，它是一个可执行的 NodeJS 文件。原理上，你可以在里面运行任何 NodeJS 代码，然后通过调用 gulp 提供的 API，来执行 gulp 任务。gulpfile.js 文件一般都会放在项目的根目录中。

一个使用 gulp-babel 插件来支持 es2015 语法的案例：

const gulp = require('gulp');
const babel = require('gulp-babel');

gulp.task('default', () => {
    gulp.src('src/app.js')
        .pipe(babel({
            presets: ['es2015']
        }))
        .pipe(gulp.dest('dist'));
});

基本概念与原理

了解这些概念，对于了解 Gulp 的工作原理，和 API 的使用是很有帮助的。

认识 Glob

Glob 是一种用来匹配路径与文件的模式。有点类似于正则表达式，但是语法又有点差异。
这种模式，被广泛用于命令行、Shell 等场景，大家熟悉的 .gitignore 文件也是使用这种模式。

各大语言都有对于 Glob 的实现，例如 Go 和 PHP 的 Glob 函数，Python 中的 glob 模块。

而 NodeJS 的实现是 minimatch, 而在 Gulp 源码中，就用了对 minimatch 进行封装的 node-glob 模块。

Gulp 的 API gulp.watch 和 gulp.src 都有用到 Glob 来匹配对应的路径和文件。

下面是部分语法：

*
匹配该路径段中 0 个或多个任意字符，
如：js/*.js，匹配 js 目录下的所有 js 文件
?
匹配该路径段中 1 个任意字符，
如：js/?.js，匹配 js 目录下所有名字只有 1 个字的 js
[...]
匹配该路径段中在指定范围内字符，
如：js/a[0-3].js，匹配 js 目录下 a 开头, 第二个字符为 0-3 之间（包括 0 和 3 ）的 js（ a03.js 不能被匹配到）
!(pattern|pattern|pattern)
匹配除所给出的模型以外的情况，
如：js/!(a|b).js，匹配 js 目录下名字中不包含 a , 也不包含 b 的所有文件.
?(pattern|pattern|pattern)
匹配所给出的模型中的 0 个或任意 1 个，
如：js/?(a|a2|b).js, 匹配 js 目录下 a.js , a2.js , b.js
+(pattern|pattern|pattern)
匹配所给出的模型中的 1 个或者多个，
如：js/+(a|a1|b).js, 匹配 js 目录下 a.js , a1.js , b.js , 或者 a, a1, b 这几个字符的组合的 js , 比如 ab.js
*(pattern|pattern|pattern)
匹配所给出的模型中的 0 个或多个或任意个的组合.
如：js/*(a|a1|b).js，匹配 js 目录下 a.js, a1.js, b.js 或者 a, a1, b 这几个字符的组合的 js , 比如 ab.js
@(pattern|pat*|pat?erN)
匹配所给出的模型中的任意 1 个，
如：js/@(a|a1|b), 匹配 js 目录下的 a.js, a1.js, b.js
` 与 `` 一样可以匹配任何内容，但 `不仅匹配路径中的某一段, 而且可以匹配 a/b/c这样带有 / 的内容，所以，它还可以匹配子文件夹下的文件.
如：js//.js，匹配 js 目录下及子文件夹中所有的 js 文件。

更多 Glob 的知识和语法，可以参考：

Glob - Wiki

Glob Primer

认识 Vinyl

Vinyl 是 Gulp 自创的一种用来描述一个虚拟文件的类，其中主要包括文件的内容和文件的路径两大信息。vinyl 模块，只是提供了一个类，而实现却交由 vinyl-fs

Vinyl-fs，它主要的工作是接受 glob 模式的参数，然后读取匹配的文件。然后利用 Vinyl 制作一个 Transform Stream，称为 Vinyl Stream 对象，并返回。

在 Gulp 中的 API gulp.src、gulp.watch、gulp.dest 都返回一个 Vinyl Stream 实例对象。Vinyl Stream 实例之间可以通过管道（ vinyl1.pipe(vinyl2) ）的形式来互相传输数据。

从 Gulp 的源码中也能看出，这三个 API 都是由 vinyl-fs 提供全部的实现。

再一点是，从这两个模块的实现来看，Gulp 是把文件内容以 Buffer 的形式读到内存中，然后再进行处理的。

认识 Orchestrator

Orchestartor，为 gulp.task 提供了全部实现，这可以从源码中看出。
它为 Gulp 提供了任务相关的功能，包括任务注册、任务执行以及相对应的任务进度、错误监控等功能。

Orchestartor 模块，只提供了一个 Orchestartor 类，该类的实例维护着一个 tasks 数组，该数组的内容就是一个我们使用 gulp.task 时注册的函数列表，以及函数的依赖和名字。
通过源码中，可以看到 tasks 的数据结构：

...
this.tasks[name] = {
  fn: fn,   // 任务的函数体
  dep: dep,   // 任务所依赖的其他任务名称
  name: name  // 该任务的名称
};
...

Gulp 核心 API

gulp.src：获取文件
gulp.dest：写入文件
gulp.tasks：注册任务
gulp.watch：监控文件的改动

gulp.src

gulp.src( globs [, options] )

接收一个 globs 模式的对象，可以是 Array 或者 String，返回一个 Vinyl Stream 实例。

而 options 有下面的值：

buffer - Boolean, 控制 file.contents 是返回 buffer 还是 stream。
read - Boolean，控制是否读取文件，如果 false，则 file.contents 为 null
base - String，控制 glob 的 base，默认值是 glob 所有表达式的前置，例如 client/js/*/.js, base 值就为 client/js/。而 glob 在保存输出路径的时候，取的是 base 之后的路径。所以可以通过该值，来进行输出路径的改写。