Gulp教程

1. 简介

Gulp 是一个基于 Node.js 内存流（Stream）的自动化项目构建工具。它采用“代码优于配置”（Code over Configuration）的原则，通过编写简洁的 JS 逻辑，将繁琐的开发任务（如样式编译、脚本混淆、图片压缩、热重载等）串联成流水线式的工作流。相较于 Grunt 等传统工具，Gulp 基于内存管道传输数据，极大地减少了磁盘 I/O 读写，因此拥有极高的构建速度。

2. 概念

Gulp 的核心机制在于流式处理以及对异步任务的生命周期管理：

2.1. 任务 (Tasks)

在 Gulp 中，每个任务本质上都是一个返回异步完成信号（Stream、Promise、Callback 等）的 JavaScript 函数。

私有任务 (Private Tasks)：仅在项目构建脚本内部使用，通常作为组合任务的子步骤，没有被 exports 导出。
公有任务 (Public Tasks)：通过 exports 从 gulpfile 中导出的任务。用户可以直接在终端通过命令（如 gulp build）来调用它们。 公有任务注册示例：
```
const myTask = (cb) => {
  console.log("执行私有任务...");
  cb();
};
// 导出为公有任务
exports.build = myTask;
```

2.2. 组合任务

Gulp 4 废弃了原有的任务依赖数组声明，改用更加灵活清晰的组合函数：

series() 顺序执行：将任务按顺序依次执行。前一个任务不结束，后一个任务不会开始（适合于清理构建目录、打包、发布等强先后依赖的场景）。
parallel() 并发执行：将任务同时启动，并行运行。它们之间互不阻塞，能够极大缩短总构建耗时（适合于同时编译 CSS、压缩图片、转译 JS 等互不相干的场景）。

2.3. 处理文件

Gulp 提供了基于 Node Stream 规范的三个核心 API，来实现文件的输入、过滤与输出：

src()：创建一个可读流，用于从本地文件系统中读取符合匹配模式（Glob）的文件。
dest()：创建一个可写流，用于向本地文件系统写入文件，并会自动创建不存在的文件夹。
pipe()：流的管道操作方法。用于将前一步的输出流（如读取的 .scss 文件流）作为输入，导向下一个处理插件（如 gulp-sass），最后导向 dest() 写入目标目录。

3. 安装

3.1. 命令行工具

gulp-cli 用于在任何目录下快速调度系统全局或项目局部的 gulp 执行程序：

npm install -g gulp-cli

3.2. 模块

在项目根目录下安装 gulp 开发依赖：

npm install gulp --save-dev

4. 使用

4.1. 命令行

gulp --tasks # 查看当前配置中注册的所有公有与私有任务

4.2. 配置文件

定义配置文件

在项目根目录下创建 gulpfile.js 配置文件：

const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const csso = require('gulp-csso');

// 编译 Sass 并压缩 CSS (Gulp 3 传统的 gulp.task 语法，Gulp 4 仍向下兼容)
gulp.task('styles', () => {
    return gulp.src('src/scss/**/*.scss') // 获取所有 scss 文件
        .pipe(sass().on('error', sass.logError)) // 编译 Sass
        .pipe(csso()) // 压缩 CSS
        .pipe(gulp.dest('dist/css')); // 输出到 dist/css 目录
});

// 默认任务 (通过 series 串行组织)
gulp.task('default', gulp.series('styles'));

(Gulp 4 推荐的 Exports 语法版本，建议优先采用)：

const { src, dest, series } = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const csso = require('gulp-csso');

function compileStyles() {
    return src('src/scss/**/*.scss')
        .pipe(sass().on('error', sass.logError))
        .pipe(csso())
        .pipe(dest('dist/css'));
}

exports.styles = compileStyles;
exports.default = series(compileStyles);

执行任务

在终端中直接运行以下指令：

gulp

4.3. 常见的插件

gulp-sass：用于将 Sass/SCSS 样式文件转译编译为标准的浏览器兼容 CSS。
gulp-uglify：用于压缩、混淆 JavaScript 代码，减小生产包体积。
gulp-minify-css：（注：最新社区更推荐使用 gulp-clean-css）用于压缩 CSS 样式表，去除空白与注释。
gulp-concat：用于将多个 CSS/JS 文件合并（拼合）成一个单一的文件，减少 HTTP 请求数。
gulp-rename：用于对输出的文件进行重命名（如添加 .min 后缀以指示已压缩）。
gulp-imagemin：用于无损优化和压缩图片资源（如 PNG、JPG、SVG、GIF）。
gulp-watch：（注：Gulp 4 已内置 gulp.watch() API）用于监控源目录中的文件变动，变动时自动触发指定的构建任务。

5. 拓展信息

5.1. 异步任务信号处理 (Async Completion)

在 Gulp 4 中，任务函数必须通知运行器它在何时执行完毕，否则会遭遇 Did you forget to signal async completion? 报错。常见的返回方式有：

返回 Stream：return gulp.src(...)。
调用 Callback 函数：在函数第一个参数接收并调用 cb()。
返回 Promise：return Promise.resolve()。
返回 Child Process：return exec('npm run build')。

5.2. 配合 Browsersync 实现热更新

通过将 Gulp 的 watch 功能与 browser-sync 插件结合，可以创建一个本地调试服务器，当 HTML/CSS/JS 发生任何修改时，浏览器无需手动刷新便能同步呈现修改效果。