- Gulp 教程
- Gulp - 首页
- Gulp - 概述
- Gulp - 安装
- Gulp - 基础知识
- Gulp - 开发应用程序
- Gulp - 组合任务
- Gulp - 监听
- Gulp - 实时重载
- Gulp - 优化 CSS 和 JavaScript
- Gulp - 优化图片
- Gulp - 有用的插件
- Gulp - 清理不需要的文件
- Gulp 有用资源
- Gulp - 快速指南
- Gulp - 有用资源
- Gulp - 讨论
Gulp - 基础知识
在本章中,您将了解与 Gulp 相关的一些基础知识。
什么是构建系统?
构建系统指的是一系列任务(统称为任务运行器),这些任务可以自动化重复性工作。
以下是可以使用构建系统处理的一些任务的列表:
- 编译预处理 CSS 和 JavaScript。
- 压缩文件以减小其大小。
- 将多个文件合并成一个文件。
- 触发服务器进行自动重新加载。
- 创建部署构建,将生成的文件存储在一个位置。
在现代前端工作流程中,构建系统与 3 个组件一起工作:
- 包管理器
- 预处理器
- 任务运行器和构建工具
包管理器
它用于自动化开发环境中所需的依赖项的安装、升级、删除、清理库和包。包管理器的示例包括bower 和npm。
预处理器
预处理器通过添加优化的语法和额外的功能(这些功能编译成其原生语言)来帮助构建高效的现代工作流程,非常有用。
一些流行的预处理器包括:
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 - 它是配置文件,用于定义我们的任务。
广告