上手gulp - 介绍 ¶

本文导航

说在前面
学会这个能干嘛
以上只是最基本的需求
相关产品

作者：KK
发表日期：2017.4.7

说在前面 ¶

欢迎来阅读本系统文章，我猜你也许可能是一个略有经验的开发者，也听说过、见识过一下别人用gulp

但这两年来我经常遇到一些人问“这东西不就是个JS、CSS自动压缩的工具吗？”，如果你也这样以为的话那完全是吃了大亏！会错失了一个构造美好前端开发环境的好技术！

来吧，听我娓娓道来……

学会这个能干嘛 ¶

这东西主要是用在前端开发工作上的，当然你会玩的话用在后端也行，只是少有人那样，后端有后端的一套成熟工具体系

你在写src/a.js，当Ctrl + S保存的时候可以自动生成一个dist/a.js，它的代码功能跟src的一样，只是被混淆压缩了，比如变量成了a b c d这样

这样的好处是JS文件的字节量变得很小了，网络传输成本降低了，而且变量名被混淆了，你的实现原理不容易被他人研究出来（通常对于高端功能来说）

然后上线的时候把dist/a.js提交上线就行了，src下的留在本地作为开发版本
你在写src/a.css保存的时候，也可以自动生成一个dist/a.css，这里面的CSS代码是被压缩了的
你在写src/a.less或src/a.scss的时候也会生成dist/a.css

注意是LESS和SASS哦，不懂请上网搜一下这两个自己学学

反正从此开始你可以不装Koala了
你在header.html写好a内容，footer.html写好c内容，然后在index.html里写b内容，可以实现保存的时候自动生成dist/index.html但里面会带有a b c内容

就是说在开发阶段已经进行了头尾合并
可以实现模拟数据

比方说你在html里写一个ajax请求/user_info.json甚至/product_list.php等等有效的HTTP地址

理想情况下这个HTTP接口会返回一个{"key" : 333}这样的JSON数据，在没有真正的服务端程序运作情况下，通过gulp你就能自己模拟一个user_info.json地址并设定模拟返回的数据，让自己的前端代码得以调试

演示的时候完全可以离线演示，整理好一套你想要的模拟数据，见A客户就上数据套件A，见B客户就上数据套件B……

对了还要告诉你，这些模拟数据可以是随机的、经过计算的、甚至加入了后端逻辑的，比如你可以判断post上来的密码是不是123777来返回是否登录成功
可以自动压缩图片到最佳大小

可曾记得，偶尔忘记了压缩图片，将一张300KB的图片作为CSS的背景上线了，后来被上头责备了一翻才屁颠屁颠去把这300KB压缩成100多KB？
本来html里引用css或js的代码大概是src="/assets/a.js?v=202cb962"的，当你保存后可以自动变成/assets/a.js?v=b964b0715

这个v参数的值就是当前文件内容的md5，只要内容变了，md5也会跟着变，你不是很渴望文件版本自动更新吗？这下满足了吧？

以上只是最基本的需求 ¶

还能实现更多更多……这些完全取决于你对编程的理解和想像，可以说根本就是爱干嘛就干嘛

上网搜一下各种gulp插件还能发现人家在玩各种花样，比如保存的时候浏览器自动刷新查看新的效果

上手gulp - 介绍 ¶

本文导航

说在前面 ¶

学会这个能干嘛 ¶

以上只是最基本的需求 ¶

相关产品 ¶