Gulp - 基础知识



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

什么是构建系统?

构建系统指的是一系列任务(统称为任务运行器),这些任务可以自动化重复性工作。

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

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

在现代前端工作流程中,构建系统与 3 个组件一起工作:

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

包管理器

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

预处理器

预处理器通过添加优化的语法和额外的功能(这些功能编译成其原生语言)来帮助构建高效的现代工作流程,非常有用。

一些流行的预处理器包括:

  • CSS - SASS、LESS 和 Stylus。

  • JS - CoffeeScript、LiveScript、TypeScript 等。

  • HTML - Markdown、Haml、Slim、Jade 等。

任务运行器

任务运行器自动化诸如 SASS 到 CSS 转换、压缩文件、优化图像以及开发工作流程中使用的许多其他任务。Gulp 是现代前端工作环境中的一个任务运行器,它运行在 Node 上。

设置您的项目

要在您的计算机上设置您的项目,例如创建一个名为“work”的文件夹。work 文件夹包含以下子文件夹和文件:

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

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

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

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

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

    • Images - 包含压缩的图像。

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

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

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

广告