摘要：
前端更新速度比火箭还快！传统的开发方式逐渐退出历史舞台。新一代构建工具早已到来，使用gulp、webpack、Parcel等可以节省大量的开发时间和提升工作效率，最重要的是说出来也好听点。不会点啥子，都没法出来混了......

你若问我为什么要学webpack，答曰：都9102年了，不会点高逼格的东西都不好意思出来混了！

调侃归调侃，下面用一句话概括本文：通过分析开发一个传统网页项目存在的若干问题来逐步引出现代化构建工具，从而提升我们在某些方面的工作效率。

一、自述

不会吹牛皮，也不怕看官笑话，实话实话。艺灵我有5年的开发传统网页经验，gulp自动化构建工具使用一年经验，webpack打包工具不足1星期的经验。所以，用老话来说，我就是一个会切图的美工，绝对的保守派！叫我前端？我叫不起！

废话不多说，进入主题。由于个经验及能力有限，文章观点多少会有偏差，如有误导，还请看官自行斟酌。

二、呈现在用户眼前的一个网页由哪些东西构成？

不管是用传统方式开发还是用现代化构建工具开发项目，都少不了4个部分，分别是：css、js、img图片、html

不管是一个简单的单页面还是一个像样的网站项目，上面提到的4大元素，缺一不可！而这些也只是底层，最终能不能见人，大气不大气，逼格够不够高还跟众多因素有关，这里不扯，我们只讲上面的四部分。

三、传统开发方式为何不高效？！

不知道看官有没有注意到一个问题：明明项目很简单，却花费了大量的时间来完成。此处排除因设计稿来回修改或后端程序配合或上帝来回提意见等问题，我们只讲前端的事，所有的锅都由前端来背！

艺灵我一路走来，写过的传统项目也是能拿出来绕自己好几圈的。其中最有感触的两个大坑就是：
1、页面缓存
2、手动刷新

你问缓存有多坑，我已生无别恋~

既然出现了问题，那就需要解决。

3.1、解决缓存

尽管看似是有很多方法来处理缓存的问题，但你有考虑过终极必杀：线上缓存！！！吗？必杀技一出，十管血都能秒完！特别是对于那些啥都不懂的用户给你反馈，这bug那bug的，归根结底：排队真正的Bug外，任你怎么解释这是缓存不是Bug！但他们就是认为你写的代码有Bug而不是缓存！如果此时的你偷笑了，就跟艺灵我握个爪吧！

四、gulp自动化构建工具的出现解决手动刷新浏览器的废时操作

这个必须要借助现代化构建工具了，在前面艺灵写过gulp版的浏览器自动刷新文章，有兴趣的可以访问以下几篇文章：
gulp实战技巧之gulp-connect-php+browser-sync实现自动刷新浏览器
gulp实战技巧之gulp-connect自动刷新浏览器
gulp实战技巧之gulp-webserver自动刷新浏览器

上面的三篇文章里面都有完整源码，每一篇都可以实现自动刷新浏览器，看官想用哪种就用哪种，可以根据自己项目需求来决定。使用上面的方法后，我们就解决了因手动刷新浏览器造成大量时间浪费的问题，并且工作效率至少可以提高30%以上！

五、使用gulp自动化构建工具有哪些好处

由于每个项目需求不一样，所以不可能有完全一样的配置，但大同小异。目前艺灵的真实感受有如下几点，如有雷同，怎么可能！

目前艺灵更新的gulp实战技巧系列文章已更新了一半了，剩下的一部分都是优化细节部分。对于上表提到的这些，全都可以节省艺灵的开发时间。比如：gulp.spritesmith，不要小看了它，有了它，我们不需要再在ps中手动花大量的时间调整css雪碧图位置和写css代码了。只需要配置好文件和命名好图标，cmd中运行gulp即可自动生成sprite.css文件和雪碧图，十分强大和好用！再次感谢@黄政向我推荐了gulp自动化构建工具。这里，艺灵我也向各位看官推荐下gulp工具，真的可以帮你节省开发时间！(如果看官已经使用了webpack、Parcel等高逼格打包工具，就不用了解gulp了。)
戳我访问gulp中文网

除了使用gulp自动化构建工具外，我们还可以使用其他的打包工具来解决手动刷新浏览器的问题和提升工作效率。例如：webpack、Parcel等

五、一直拒绝webpack的原因

之前一直不敢用webpack，主要是心里有阴影，说到底还是不熟悉，被吓怕了！

之前按网上的教程安装好了，然后打包了一个不到1KB的js文件，结果打包后变成了100+KB，当时就把我吓懵逼了！从此，再也没有碰过webpack。

最近我又开始跟着网上的免费教程学习（webpack深入与实战），才知道是自己的打包方式问题。开发环境下--mode=development的代码会比较大，而生产环境--mode=production就是线上环境下的会小很多。

六、使用webpack后的感受

毕竟只学了几天，还没有一星期，所以也不敢写笔记，但收获很大，对webpack也有了新的认识。至于笔记的话，目前没资格写，后续等能力达到时再输出吧。

七、一切口头吹虚都是耍流氓！

上面废话了一堆，无非是想告诉看官：传统开发方式有很多地方会浪费掉我们大量的时间！所以，要想提高效率必须要有手段！但也不是说，有了手段就可以一步上天！

我依稀记得2013年找工作时，有一家医疗机构问我做一个页面需要多久。当时不熟练的说需要几天，然后被对方鄙视了，对方说他们很快，只需要几小时。放到现在，我仍然会觉得他是在吹牛皮！2013年那个年代，你跟我讲一个几屏的页面几小时就能完工？要上天吗？即使是现在，你用了什么css预处理器sass或less再配上强大的构建工具，一个页面下来，兼容并适配移动端，几小时解决战斗还差不多！而真实情况可能并不太乐观。。。。。。

当然了，光脚的不怕穿鞋的。切图大法在手，别说一个页面了，就是整个网站，那也是no problem！

八、工欲善其事，必先利其器

不管是gulp还是webpack还是Parcel，都需要安装大量的插件才能替代传统开发模式。虽然配置是一大坑，但走过后终会是甜的！

转载声明：
　　若亲想转载本文到其它平台，请务必保留本文出处！
本文链接：/xwzj/2019-05-19/gulp-webpack.html

若亲不想直保留地址，含蓄保留也行。艺灵不想再看到有人拿我的技术文章到他的地盘或者是其它平台做教(装)程(B)而不留下我的痕迹。文章你可以随便转载，随便修改，但请尊重艺灵的劳动成果！谢谢理解。