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
);