Basics

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

什么是构建系统？

构建系统称为任务集合（统称为task runners ），可自动执行重复性工作。

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

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

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

• 包管理员
• Preprocessors
• 任务运行器和构建工具

包裹经理

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

预处理器(Preprocessors)

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

一些流行的预处理器是 -

• CSS - SASS，LESS和Stylus。

• JS - CoffeeScript，LiveScript，TypeScript等

• HTML - Markdown，HAML，Slim，Jade等

任务跑步者

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

设置项目

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

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

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

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

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

• Build - 将自动创建包含生产文件的此文件夹。

  • Images - 包含压缩图像。

  • Scripts - 包含缩小代码的单个脚本文件。

  • Styles - 包含缩小代码的单个CSS文件。

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