Gulp

用JavaScript代码替代重复手工操作，将TypeScript编译、图片压缩、CSS预处理等任务组合成高效构建流水线，解决前端开发中缓慢、重复的工作流问题。

核心机制：流式内存处理

gulp通过Vinyl对象描述文件（含path和contents属性），利用Node.js流在内存中对文件执行多重转换，仅最终结果写入磁盘。src()生成Vinyl对象流，dest()消费流并输出文件，全程避免临时文件读写，显著提升构建速度。

• Vinyl适配器：每个文件源（本地/远程）通过src(globs, [options])和dest(folder, [options])接口暴露，返回Vinyl对象流
• glob base：src()根据glob字符串中特殊字符前的路径段（如/src/js/）设置base属性，保证匹配路径共享该前缀
• 任务异步：每个gulp任务必须为异步函数——接受error-first回调或返回stream/promise/event emitter/child process/observable，不支持同步任务

插件生态与组合方式

社区插件执行单一功能（如Babel转译、Imagemin压缩、Autoprefixer添加前缀），通过.pipe()链式连接，像搭积木一样组合成完整流水线。官网提供插件浏览页面，支持从Babel、SASS、TypeScript到Pug等多种技术选型。

• 链式调用：每个插件只做少量工作，输出流直接接入下一个插件输入
• 典型组合：TypeScriptBabelAutoprefixerImageminWebP输出
• 灵活配置：gulpfile中可使用自有代码或插件，代码优先于配置

快速上手与版本验证

需先全局安装gulp-cli（npm install --global gulp-cli），项目内安装gulp包至devDependencies。创建gulpfile.js并导出默认任务后运行gulp命令测试。官网强调：若之前全局安装过旧版gulp，需先npm rm --global gulp再按步骤操作。

• 前置检查：node --version、npm --version、npx --version确认环境
• 项目初始化：npx mkdirp my-project && cd my-project && npm init
• 版本核对：gulp --version输出需与官网截图一致，否则重启步骤
• 最小gulpfile：function defaultTask(cb){cb();} exports.default = defaultTask

捐赠与社区支持

自2013年起gulp持续由个人捐赠者支持。官网提供三档月度捐赠：$2（无额外权益）、$5（头像轮播于贡献者横幅）、$10（Twitter致谢+头像轮播）。捐赠用于扩大团队和维护项目。

• 组织支持：捐赠者信息会向用户公开致谢
• 社区渠道：GitHub、Stack Overflow、Twitter官方账号

常见问题

Q1：gulp的glob base是什么？如何影响文件路径？

A1：glob base是glob字符串中特殊字符前的路径段，例如/src/js/**.js的base为/src/js/。所有匹配文件共享该前缀，src()生成的Vinyl对象以base作为base属性值，写入文件系统时保留该相对路径结构。

Q2：gulp任务为什么必须异步？支持哪些异步方式？

A2：由于部分平台限制，gulp不支持同步任务。任务必须为异步函数，可接受error-first回调，或返回stream、promise、event emitter、child process、observable中的一种。

Q3：安装gulp前为什么要卸载全局版本？

A3：如果之前通过npm install --global gulp安装了旧版全局gulp，新版gulp-cli会与之冲突。官网明确要求先执行npm rm --global gulp，再安装gulp-cli，否则版本验证可能失败。

更多同类工具与网站,可在构建工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。