Gulp.js 简介
Gulp.js 是一个基于任务的构建系统，使用 JavaScript 编写，运行在 Node.js 环境中。它帮助开发者自动化前端开发任务，如编译 CSS、压缩 JavaScript、处理图片、合并文件等。
核心概念

  • 任务（Tasks）：任务是执行特定工作的函数。可以定义多个任务，每个任务对应一种或多种工作流程。
  • 流（Streams）：Gulp 使用 Node.js 的 stream 来处理文件，能够高效地处理大量数据，避免将所有文件加载到内存中。
  • 插件（Plugins）：Gulp 有大量插件处理常见任务，如 gulp-sass 编译 SASS，gulp-uglify 压缩 JavaScript。这些插件基于 Gulp 的 API 开发。
  • 管道（Pipe）：通过 .pipe() 方法将流从一个任务传递到另一个任务，形成处理链。例如，文件通过 SASS 编译后再进行 CSS 压缩。
    基本结构
  • 安装 Gulp：全局安装 npm install --global gulp-cli，本地安装 npm install --save-dev gulp。
  • 配置 Gulpfile.js：Gulpfile 包含任务定义，可以在其中导入插件并创建任务。
  • 定义任务：使用 gulp.task() 定义任务，支持设置任务依赖。
  • 使用流：通过 src() 获取文件，使用 .pipe() 处理，最后用 dest() 指定输出位置。
  • 运行 Gulp：在命令行中输入 gulp 或 gulp [taskname] 执行相应任务。
    实战应用
    在示例项目中，通常包括：
  • 一个 Gulpfile 示例，展示如何定义和运行任务。
  • HTML、CSS、JavaScript 项目，演示 Gulp 处理这些文件。
  • 自动编译 SASS、合并 CSS 和 JavaScript、压缩资源、实时刷新浏览器的配置。
  • watch 任务，当源文件发生变化时，自动重新运行任务。
    Gulp.js 是前端开发中的重要工具，通过定义任务和使用流自动化构建流程，提高工作效率并确保项目质量。