一杯茶的时间，带你区分gulp和webpack

前言☀️

使用场景🏄

举几个简单的场景好理解一点

当然还有我们开发经常遇到的很多场景和苦恼的地方，我们要解决这些问题包括图片大小之类的在之前都需要自己去压缩网站压缩但是有了自动化构建工具我们就可以提高我们开发效率让我们的注重点放在打代码上

gulp⌛️

webpack⏳

没错 还是这张图，想必大家对webpack已经挺熟悉的了

谈谈两者❔

缘由

比较

借用@DOM哥分享的一个表格从各个角度对gulp和webpack做的对比：

GulpWebpack定位基于流的自动化构建工具一个万能模块打包器目标自动化和优化开发工作流，为通用 website 开发而生通用模块打包加载器，为移动端大型 SPA 应用而生学习难度易于学习，易于使用，api总共只有5个方法有大量新的概念和api，不过好在有详尽的官方文档适用场景基于流的作业方式适合多页面应用开发一切皆模块的特点适合单页面应用开发作业方式对输入（gulp.src）的 js，ts，scss，less 等源文件依次执行打包（bundle）、编译（compile）、压缩、重命名等处理后输出（gulp.dest）到指定目录中去，为了构建而打包对入口文件（entry）递归解析生成依赖关系图，然后将所有依赖打包在一起，在打包之前会将所有依赖转译成可打包的 js 模块，为了打包而构建使用方式常规 js 开发，编写一系列构建任务（task）。编辑各种 JSON 配置项优点适合多页面开发，易于学习，易于使用，接口优雅。可以打包一切资源，适配各种模块系统缺点在单页面应用方面输出乏力，而且对流行的单页技术有些难以处理（比如 Vue 单文件组件，使用 gulp 处理就会很困难，而 webpack 一个 loader 就能轻松搞定）不适合多页应用开发，灵活度高但同时配置很繁琐复杂。“打包一切” 这个优点对于 HTTP/1.1 尤其重要，因为所有资源打包在一起能明显减少浏览器访问页面时的资源请求数量，从而减少应用程序必须等待的时间。但这个优点可能会随着 HTTP/2 的流行而变得不那么突出，因为 HTTP/2 的多路复用可以有效解决客户端并行请求时的瓶颈问题。结论浏览器多页应用(MPA)首选方案浏览器单页应用(SPA)首选方案

写在最后👋

gulp和webpack的关系举个不是很恰当的例子就是当你想去按摩店（gulp）放松一下，有一天你去理发店（webpack）洗头的小哥说可以帮你按摩一下，从那以后，你发现洗头可以顺便按摩很方便啊，于是你就安利给朋友，以后大家都这样做了。