Gulp进阶之路:从任务创建到高效管理的秘诀

1. 什么是 Gulp

Gulp 是一个前端开发过程中的自动化构建工具,基于 Node.js 的流。它使用流来处理文件,使构建过程更为高效。Gulp 的核心理念是"代码优于配置",通过最少的 API 让任务编写变得简单,同时使得复杂的任务也可管理。利用 Gulp,开发者可以自动化完成前端代码的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

在 Gulp 中,每个功能都被视为一个任务,如压缩 CSS 的任务或合并文件的任务,这些任务被写在一个叫做 gulpfile.js 的文件中。这个文件用于配置所有任务,其中导出的任务被称为公开任务,可以通过 gulp 命令直接调用,Gulp 是一个强大的工具,可以大大提高前端开发的工作效率

2. Gulp 可以做什么

它是基于 Nodejs,自动化地完成 javascript、coffee、sass、less、html/image、css 等文件的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成,并监听文件在改动后重复指定的这些步骤。

2.1 缺点

  • 不支持 tree-shaking、热更新、代码分割等;
  • gulp 对 js 模块化方案无能为力,只是对静态资源做流式处理,处理之后并未做有效的优化整合。

3. Gulp 安装

  1. 必要环境:Node,npm, npx 这里就不在赘述如何安装
  2. 安装 gulp:npm install --save-dev gulp

4. js 和 gulp

(1) 你可以使用 JavaScript 的知识来编写 gulpfile (2) 可以使用转译语言编写 gulpfile 使用 TypeScript 则文件为 gulpfile.ts,然后安装 ts-node 模块 使用 Babel 则文件为 gulpfile.babel.js,然后安装 @babel/register 模块 (3) gulpfile 可以分割为多个文件,将每个任务拆开,然后再导入带 gulpfile 中,这可以避免单个文件非常的大。

5. 如何创建任务

gulp 任务都是异步 js 函数,接受错误回调,streams,promise,event emitter,子进程或可观察的函数(watch),所以当你完成任务后需要返回的类型需要注意,这里给个简单的例子:

gulpfile.js 复制代码
const { src, dest } = require('gulp');

function streamTask() {
  return src('*.js')
  // 管道将 src 读取的文件Vinyl 对象的流传递给 dest()
    .pipe(dest('output'));
}

exports.default = streamTask;

要知道如何创建任务首先需要了解任务类型: gulp 的任务类型分为公共任务和私有任务,公共任务和私有任务的主要区别在于它们的可访问性和使用方式。

(1) 公共任务(Public Tasks):

  • 公共任务是从 gulpfile.js 文件中通过 exports 导出的任务。由于它们被导出,因此可以在命令行中直接通过 gulp 命令调用。
  • 这些任务通常用于那些需要用户直接执行或作为构建过程的一部分经常调用的任务,如编译 SASS、压缩图片等。
  • 公共任务的编写和导出使得它们对于使用 Gulp 的用户来说是可见的,并且可以通过简单的命令执行。

(2) 私有任务(Private Tasks):

  • 私有任务是在 gulpfile.js 中定义但未被直接导出的任务。它们通常作为 series()或 parallel()组合的组成部分,用于构建更复杂的任务流。
  • 私有任务在外观和行为上与公共任务相同,但用户不能直接通过命令行调用它们。它们主要在内部被其他任务调用,以执行特定的构建步骤或操作。
  • 私有任务的存在允许开发者将复杂的构建逻辑分解为更小、更易于管理的部分,并在需要时组合这些部分来创建更复杂的构建任务。

公共任务是那些可以从命令行直接调用的任务,而私有任务则是作为其他任务组成部分的内部任务,不能直接从命令行调用。这种区分使得开发者能够更灵活地组织和管理他们的构建过程,同时保持命令行接口的简洁和清晰。

gulpfile.js 复制代码
const { series } = require("gulp");

// 私有任务,没有导出
function clean(cb) {
  cb();
}

// 共有任务
function build(cb) {
  cb();
}

export.build = build;
// 可以理解为进行一系列的操作,不是并行的,按顺序执行
export.default = series(clean, build);

5.1 一些常用的 api

(1) series 串行执行

(2) parallel 并行执行

(3) src 读取文件

(4) dest 写入文件

(5) task 创建任务

(6) watch 监听文件

详细的 api 解释和更多请看这里

相关推荐
灵感__idea1 小时前
Hello 算法:贪心的世界
前端·javascript·算法
GreenTea3 小时前
一文搞懂Harness Engineering与Meta-Harness
前端·人工智能·后端
killerbasd4 小时前
牧苏苏传 我不装了 4/7
前端·javascript·vue.js
吴声子夜歌4 小时前
ES6——二进制数组详解
前端·ecmascript·es6
码事漫谈5 小时前
手把手带你部署本地模型,让你Token自由(小白专属)
前端·后端
ZC跨境爬虫5 小时前
【爬虫实战对比】Requests vs Scrapy 笔趣阁小说爬虫,从单线程到高效并发的全方位升级
前端·爬虫·scrapy·html
爱上好庆祝5 小时前
svg图片
前端·css·学习·html·css3
橘子编程5 小时前
JavaScript与TypeScript终极指南
javascript·ubuntu·typescript
王夏奇5 小时前
python中的__all__ 具体用法
java·前端·python
叫我一声阿雷吧6 小时前
JS 入门通关手册(45):浏览器渲染原理与重绘重排(性能优化核心,面试必考
javascript·前端面试·前端性能优化·浏览器渲染·浏览器渲染原理,重排重绘·reflow·repaint