Gulp - 基础知识

---

在本章中，您将熟悉一些与 Gulp 相关的基础知识。

什么是构建系统？

构建系统被称为任务集合（统称为任务运行器），它自动执行重复性工作。

以下是可以使用构建系统处理的一些任务的列表 -

• 预处理 CSS 和 JavaScript 的编译。
• 缩小文件以减小其大小。
• 将文件串联成一个。
• 触发服务器自动重新加载。
• 创建部署构建以将生成的文件存储在一个位置。

在现代前端工作流程中，构建系统使用 3 个组件 -

• 包管理器
• 预处理器
• 任务运行器和构建工具

包管理器

它用于自动安装升级、删除所需的依赖项、清理开发环境中使用的库和包。包管理器的示例是Bower和npm。

预处理器

预处理器通过添加优化的语法和编译为本机语言的附加功能，对于高效的现代工作流程非常有用。

一些流行的预处理器是 -

• CSS - SASS、LESS 和 Stylus。

• JS - CoffeeScript、LiveScript、TypeScript 等

• HTML - Markdown、HAML、Slim、Jade 等

任务运行器

任务运行程序可自动执行 SASS 到 CSS 转换、缩小文件、优化图像以及开发工作流程中使用的许多其他任务等任务。Gulp 是现代前端工作环境中的任务运行器之一，它运行在 Node.js 上。

设置您的项目

例如，要在计算机中设置项目，请创建一个名为“work”的文件夹。工作文件夹包含以下子文件夹和文件 -

• Src - 预处理的 HTML 源文件和文件夹的位置。

  • 图像- 包含未压缩的图像。

  • 脚本- 包含多个预处理的脚本文件。

  • 样式- 包含多个预处理的 CSS 文件。

• Build - 该文件夹将自动创建，其中包含生产文件。

  • 图像- 包含压缩图像。

  • 脚本- 包含精简代码的单个脚本文件。

  • 样式- 包含精简代码的单个 CSS 文件。

• gulpfile.js - 它是配置文件，用于定义我们的任务。