前端工程化 词条目录
前端Wiki/词条/Gulp 流构建

Gulp 流构建

定义基于流(Stream)的自动化任务构建工具,把压缩、编译、刷新等琐事串成可复用的任务管线

Gulp 的核心思想是「文件流」:通过 src 读入文件,经一系列 pipe 插件处理,再 dest 输出,中间全部在内存中流动,不落地中间文件。相比 Grunt 的「读文件、写临时文件、再读回来」,它更快也更符合直觉。task 组合起来就能描述一套完整的构建流程。watch 方法还能监听文件变化自动重跑任务,配合浏览器插件即可实现保存即刷新的本地开发体验。

在 Vite 时代 Gulp 已不是新项目首选,但它在设计稿、图标字体、多页面静态站、老项目改造等场景依然好用。它的 api 极简:task、src、pipe、dest、watch、series、parallel,半天就能上手,适合那些不需要整套打包器的轻量自动化需求。命令行直接 gulp 任务名即可执行,再通过 npm scripts 暴露给团队,新人无需理解内部管线也能一键构建。

JavaScript
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);
};
⚠ 常见误区
🔗 相关词条为什么需要构建工具webpack 核心概念
← 返回来源章节为什么需要构建工具