Gulp是基于Node.js的流式前端构建工具，通过src()、dest()、pipe()和watch()四大核心方法实现高效的任务自动化处理。它利用内存中的文件流减少磁盘读写，提升性能，支持SASS编译、CSS压缩、JS合并等任务，并可通过自定义插件扩展功能，适用于轻量级或定制化项目构建场景。
提到前端构建工具，Gulp 是一个基于流（stream）的自动化构建工具，凭借其简洁的 API 和高效的处理方式，在开发者中广受欢迎。它通过任务（task）驱动流程，利用插件生态完成压缩、编译、监听等常见操作，同时支持自定义插件开发，灵活满足项目需求。
什么是 Gulp 以及它的核心理念
Gulp 基于 Node.js 平台，使用 JavaScript 编写任务脚本（通常为 gulpfile.js），通过管道（pipe）方式将文件流依次传递给各个处理步骤。与早期构建工具如 Grunt 不同，Gulp 避免频繁的磁盘读写，借助内存中的流处理提升性能。
其四大核心方法是：src()、dest()、watch() 和 task()。这些方法构成了任务流的基础：
- gulp.src(globs)：匹配指定路径的文件，返回可读流
- pipe(transform)：将流传递给转换函数或插件
- gulp.dest(path)：将流写入目标目录
- gulp.watch(globs, task)：监听文件变化并执行任务
编写典型的 Gulp 构建任务
以一个常见的前端项目为例，我们需要处理 SASS 编译、CSS 压缩、JS 合并压缩和自动刷新浏览器。先安装所需依赖：
立即学习“Java免费学习笔记（深入）”；
npm install gulp gulp-sass gulp-cssnano gulp-uglify gulp-concat browser-sync --save-dev
接着在 gulpfile.js 中定义任务：
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));
const cssnano = require('gulp-cssnano');
const uglify = require('gulp-uglify');
const concat = require('gulp-concat');
const browserSync = require('browser-sync').create();
// 编译 SASS 并压缩 CSS
gulp.task('styles', () => {
return gulp.src('src/scss/*/.scss')
.pipe(sass().on('error', sass.logError))
.pipe(cssnano())
.pipe(gulp.dest('dist/css'))
.pipe(browserSync.stream());
});
// 压缩并合并 JS
gulp.task('scripts', () => {
return gulp.src('src/js/*/.js')
.pipe(uglify())
.pipe(concat('app.min.js'))
.pipe(gulp.dest('dist/js'));
});
// 静态服务器 + 监听文件变化
gulp.task('serve', () => {
browserSync.init({
server: './'
});
gulp.watch('src/scss/*/.scss', gulp.series('styles'));
gulp.watch('src/js/*/.js', gulp.series('scripts')).on('change', browserSync.reload);
gulp.watch('./*.html').on('change', browserSync.reload);
});
// 默认任务
gulp.task('default', gulp.series('styles', 'scripts', 'serve'));
运行 gulp 命令后，项目进入开发模式，自动编译资源并实时刷新页面。
开发自定义 Gulp 插件
当现有插件无法满足特定需求时，可以开发自己的 Gulp 插件。Gulp 插件本质是一个返回 Transform 流的函数，遵循 through2 模块规范。
例如，创建一个插件，自动为每个 CSS 文件添加注释标识：
const through = require('through2');
const PluginError = require('plugin-error');
// 插件名称
const PLUGIN_NAME = 'gulp-add-header';
function addHeader(comment) {
return through.obj(function(file, enc, cb) {
if (file.isNull()) return cb(null, file);
if (file.isBuffer()) {
const content = file.contents.toString();
file.contents = Buffer.from(/* ${comment} */\n${content});
}
this.push(file);
cb();
});
}
module.exports = addHeader;
在 gulpfile 中使用该插件：
const addHeader = require('./gulp-add-header');
gulp.task('styles', () => {
return gulp.src('src/scss/*/.scss')
.pipe(sass())
.pipe(addHeader('Generated by Gulp'))
.pipe(gulp.dest('dist/css'));
});
这个简单的插件展示了如何操作文件流并保持 Gulp 的链式调用风格。
基本上就这些。Gulp 的任务流设计直观高效，配合丰富的插件生态和可扩展的插件机制，能轻松应对大多数前端构建场景。虽然近年来 Vite、Webpack 等工具兴起，但在轻量级项目或需要高度定制化流程时，Gulp 依然具备独特优势。
