Gulp 的核心思想是「文件流」:通过 src 读入文件,经一系列 pipe 插件处理,再 dest 输出,中间全部在内存中流动,不落地中间文件。相比 Grunt 的「读文件、写临时文件、再读回来」,它更快也更符合直觉。task 组合起来就能描述一套完整的构建流程。watch 方法还能监听文件变化自动重跑任务,配合浏览器插件即可实现保存即刷新的本地开发体验。
在 Vite 时代 Gulp 已不是新项目首选,但它在设计稿、图标字体、多页面静态站、老项目改造等场景依然好用。它的 api 极简:task、src、pipe、dest、watch、series、parallel,半天就能上手,适合那些不需要整套打包器的轻量自动化需求。命令行直接 gulp 任务名即可执行,再通过 npm scripts 暴露给团队,新人无需理解内部管线也能一键构建。
const { src, dest, series, parallel } = require('gulp'); const uglify = require('gulp-uglify'); const rename = require('gulp-rename'); // 压缩 JS 并输出到 dist 目录 function minify() { return src('src/js/**/*.js') // 读入所有源文件 .pipe(uglify()) // 内存中压缩 .pipe(rename({ suffix: '.min' })) // 改名为 xxx.min.js .pipe(dest('dist/js')); // 写出 } // 默认任务:监视变化自动执行 exports.default = function () { return watch('src/js/**/*.js', minify); };