gulp基础


Gulp基础

这一章,我们将学习Gulp的一些基础内容。

什么是编译系统?

一个编译系统是一个任务的集合(准确的来讲叫做“任务运行器”),它能自动完成一些重复性工作。

以下列出了可以使用构建系统处理的一些任务

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

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

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

包管理器

它用于自动执行安装升级,删除所需的依赖项,清理库和开发环境中使用的包。包管理器的例子是 bowernpm

预处理器

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

一些流行的预处理器是 −

  • CSS − SASS, LESS and Stylus.
  • JS − CoffeeScript, LiveScript, TypeScript, etc.
  • HTML − Markdown, HAML, Slim, Jade, etc.

任务运行器

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

设置您的项目

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

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

    • Images − 包含未压缩的图像。
    • Scripts − 包含多个预处理脚本文件。
    • Styles − 包含多个预处理的CSS文件。
  • Build − 该文件夹将自动创建,其中包含生产文件。.

    • Images − 包含压缩图像。
    • Scripts − 包含缩小代码的单个脚本文件。
    • Styles − 包含缩小代码的单个CSS文件。
  • gulpfile.js − 它是配置文件,用于定义我们的任务。