关于Gulp，你学这些就够了

Gulp 是一个基于流（Stream）的构建工具，用于自动化前端开发中的常见任务（如文件压缩、编译、自动化测试等）。它的设计理念是将任务流程处理成数据流，通过管道（Pipeline）处理数据，以达到自动化构建的目的。

现在对 gulp 的使用已经很少了，但是有些面试官在面试的时候还是会问，因此单独写一篇文章来讲一下。

1. Gulp 的基本概念

• **流（Stream）**：Gulp 通过流的方式来处理文件，可以让文件在内存中进行操作，而不需要频繁的读写磁盘。
• **任务（Task）**：每个 Gulp 操作叫做一个任务，任务可以包含一个或多个操作（如文件压缩、文件合并等）。
• **管道（Pipe）**：Gulp 使用管道来连接多个任务，以此形成工作流。管道是任务之间的流动路径，每个任务输出的结果作为下一个任务的输入。

2. 安装 Gulp

首先，确保你已经安装了 Node.js，然后通过 npm 安装 Gulp。

# 安装 Gulp CLI（命令行工具）
npm install --global gulp-cli

# 在项目中安装 Gulp 本地依赖
npm install --save-dev gulp

3. 创建 Gulp 任务

gulp 任务函数可以接受一个 callback 作为参数，调用 callback 函数那么任务会结束；或者是一个返回 stream、promise、event emitter、child process 或 observable 类型的函数。

一套流程 = src → pipe(plugin) → pipe(plugin) → dest

以下写法均为：gulp4+ 版本的最新写法。

1）定义一个任务（Task）

function hello(cb) {
  console.log("Gulp run ok");
  cb(); // 表示任务完成
}
exports.hello = hello;

运行：

gulp hello

2）处理 CSS / Sass

npm i gulp-sass sass gulp-clean-css gulp-autoprefixer -D

const { src, dest } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCSS = require("gulp-clean-css");
const autoprefixer = require("gulp-autoprefixer");

function styles() {
  return src("src/scss/*.scss")
    .pipe(sass())                // scss -> css
    .pipe(autoprefixer())        // 自动加前缀
    .pipe(cleanCSS())            // 压缩 css
    .pipe(dest("dist/css"));
}

exports.styles = styles;

运行：

gulp styles

3）压缩 / 合并 JS

npm i gulp-uglify gulp-concat -D

const uglify = require("gulp-uglify");
const concat = require("gulp-concat");

function scripts() {
  return src("src/js/*.js")
    .pipe(concat("app.min.js")) // 合并
    .pipe(uglify())             // 压缩
    .pipe(dest("dist/js"));
}

exports.scripts = scripts;

4）压缩图片

npm i gulp-imagemin -D

const imagemin = require("gulp-imagemin");

function images() {
  return src("src/images/*")
    .pipe(imagemin())   // 压缩图片
    .pipe(dest("dist/images"));
}

exports.images = images;

5）监听文件修改

const { watch } = require("gulp");

function dev() {
  watch("src/scss/*.scss", styles);
  watch("src/js/*.js", scripts);
  watch("src/images/*", images);
}

exports.dev = dev;

运行：

gulp dev

文件一改 → 自动构建

6）组合任务 series / parallel

示例：

const { series, parallel } = require("gulp");

exports.build = series(styles, scripts, images);   // 先后执行
exports.all    = parallel(styles, scripts, images); // 同时执行

运行：

gulp build

7）默认任务（直接 gulp）

exports.default = series(styles, scripts, images, dev);

执行：

gulp

常用 gulpfile.js

const { src, dest, series, parallel, watch } = require("gulp");
const sass = require("gulp-sass")(require("sass"));
const cleanCSS = require("gulp-clean-css");
const uglify = require("gulp-uglify");
const concat = require("gulp-concat");
const imagemin = require("gulp-imagemin");
const autoprefixer = require("gulp-autoprefixer");

// CSS处理
function styles() {
  return src("src/scss/*.scss")
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(cleanCSS())
    .pipe(dest("dist/css"));
}

// JS处理
function scripts() {
  return src("src/js/*.js")
    .pipe(concat("app.min.js"))
    .pipe(uglify())
    .pipe(dest("dist/js"));
}

// 图片压缩
function images() {
  return src("src/images/*")
    .pipe(imagemin())
    .pipe(dest("dist/images"));
}

// 监听
function dev() {
  watch("src/scss/*.scss", styles);
  watch("src/js/*.js", scripts);
  watch("src/images/*", images);
}

exports.default = series(
  parallel(styles, scripts, images),
  dev
);