📜  Gulp-基础

📅  最后修改于: 2020-10-25 06:22:27             🧑  作者: Mango


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

什么是构建系统?

Build System称为任务集合(统称为任务运行器),它使重复的工作自动化。

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

  • 预处理CSS和JavaScript的编译。
  • 缩小文件以减小其大小。
  • 将文件串联在一起。
  • 触发服务器进行自动重装。
  • 创建部署版本可将生成的文件存储在一个位置。

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

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

包装经理

它用于自动化安装升级,删除必需的依赖项,清理库以及开发环境中使用的软件包。软件包管理器的示例是bowernpm

预处理器

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

一些流行的预处理器是-

  • CSS -SASS,LESS和Stylus。

  • JS -CoffeeScript,LiveScript,TypeScript等

  • HTML -Markdown,HAML,Slim,Jade等

任务执行者

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

设置项目

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

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

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

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

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

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

    • 图像-包含压缩图像。

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

    • 样式-包含最小代码的单个CSS文件。

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