开发手册 欢迎您!
软件开发者资料库

Gulp - 基础知识

Gulp Basics - 从概述,安装,基础知识,开发应用程序,结合Gulp任务,观察,Live Relaod,优化CSS和JavaScript文件,优化图像,有用的插件,清理不需要的文件,学习Gulp。

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

什么是构建系统?

构建系统是被称为任务集合(统称为任务运行者),它可以自动完成重复性工作.

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

  • 预处理CSS和JavaScript的编译.

  • 缩小文件减小其大小.

  • 将文件连接成一个文件.

  • 触发服务器自动重新加载.

  • 创建部署版本以将生成的文件存储在一个位置.

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

  • 包管理器

  • 预处理器

  • 任务运行者和构建工具

包管理器

它用于utomate安装升级,删除所需的依赖项,清理库和开发环境中使用的包.包管理器的示例是 bower npm .

预处理器

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

一些流行的预处理器是 :

  • CSS :  SASS,LESS和Stylus.

  • JS :  CoffeeScript,LiveScript,TypeScript等

  • HTML :  Markdown,HAML,Slim,Jade等

任务运行者

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

设置项目

设置你的在您的计算机上项目,创建一个名为"work"的文件夹.工作文件夹包含以下子文件夹和文件 :

  • Src : 预处理的HTML源文件和文件夹的位置.

    • 图像 : 包含未压缩的图像.

    • 脚本 : 包含多个预处理的脚本文件.

    • 样式 : 包含多个预处理的CSS文件.

  • 构建  : 去;此文件夹将自动创建,其中包含生产文件.

    • 图像 : 包含压缩图像.

    • 脚本 : 包含缩小代码的单个脚本文件.

    • 样式 : 包含缩小代码的单个CSS文件.

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

})();