2021年React项目开发该用Webpack还是Gulp，或者两者搭配？

Webpack 5 是否还有使用Gulp的必要 #

绝大多数常规React业务开发场景下，只使用Webpack 5完全可以覆盖全部构建需求，不需要额外引入Gulp。
早年需要搭配Gulp的核心原因是早期Webpack对非JS资源的处理能力薄弱，SCSS编译、资源压缩、静态资源搬运这类任务没有成熟的loader/plugin支持，需要Gulp这类任务运行器前置处理。现在Webpack 5的生态已经非常成熟，sass-loader、css-loader、mini-css-extract-plugin、terser-webpack-plugin等工具可以完全覆盖SCSS转CSS、代码分割、资源哈希、压缩等前端常见构建需求，单纯的React业务开发不需要引入Gulp增加项目复杂度。

Webpack官方文档中「Gulp这类任务运行器属于更高层级的工具，搭配使用可能会有帮助」的含义 #

这句话的核心是明确二者的定位差异：

• Webpack本质是模块化打包工具，核心逻辑是基于入口文件遍历依赖树，把零散的模块打包成符合运行环境要求的产物，所有能力都是围绕「模块化打包」这个核心延伸的
• Gulp本质是任务调度运行器，没有强绑定的打包逻辑，核心是把任意操作封装成任务，自定义任务的执行顺序、并行/串行规则，可以脱离模块化打包场景执行任意操作

所谓的搭配有帮助，指的是当你有打包流程之外的零散任务需求时，可以用Gulp统一调度所有流程，比如：

打包前自动清理旧构建产物、同步CDN资源、拉取远程配置文件，打包后自动生成产物版本清单、上传产物到服务器、发送构建完成通知等，这些不属于Webpack核心打包链路的操作，用Gulp编排会比全部写在Webpack插件里逻辑更清晰，维护成本更低。

是否可以用npm scripts替代Gulp #

大部分简单场景下完全可以替代。npm scripts本质是命令行脚本的快捷入口，如果你需要的额外任务都是可以通过命令行工具完成的，比如用rimraf删目录、用scp传文件，直接在package.json里配置串行/并行执行的scripts就能满足需求，不需要引入Gulp。
只有当你的任务逻辑非常复杂，比如需要多任务依赖调度、文件流处理、自定义逻辑批量处理文件时，Gulp的编程式任务编排能力会比纯npm scripts+shell脚本更易维护。

最终选型建议 #

• 90%以上的常规React业务开发场景：仅使用Webpack 5即可，不需要额外引入Gulp或者其他任务调度工具，现在主流的React脚手架（Create React App、Next.js等）都是默认只内置Webpack作为构建工具，完全可以覆盖需求
• 需要搭配Gulp的适用场景：
  • 项目有大量打包链路外的自定义任务，需要统一调度
  • 多技术栈共存的老项目，需要同时处理非Webpack打包的资源
  • 有复杂的文件流处理需求，比如批量处理静态资源、自定义多环境打包流程
• 如果只有少量零散任务，直接用npm scripts实现即可，不需要引入Gulp增加依赖复杂度。

内容的提问来源于stack exchange，提问作者AnorLondo