gulp到底是干啥的？

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了gulp到底是干啥的？相关的知识，希望对你有一定的参考价值。

应该说前端发展到今天，已经变得面目全非了。

从jquery一统天下，到现在各种框架的四分五裂，完成这个转化花的时间，不过短短的一两年。层出不穷的诸多框架及配套工具，令我们眼花缭乱无所适从，到底应该如何应对，是困扰我们的一个大难题。

全部学习是不可能的，因为我们根本没那么多精力；而相信什么回归本源（有人主张舍弃一切，拥抱原生），那更是因噎废食的做法。

有选择性的学习，让工具为己所用，最终提升工作效率，达到升职和赚更多薪水，这才是王道（顺便也提升一下逼格，出去吹个小牛逼~~）

今天我们就来学习一种简单好用的工具——gulp。

gulp是用node写的一个小工具，那么它能帮助我们做什么事呢？

1.压缩代码。

我们知道，打开一个网页，是要下载很多文件的。文件越大，下载越慢，访问速度就慢；而且，有些自以为写的很漂亮的代码，我并不希望被别人轻易看到。

这时，我们就可以利用压缩，先将css、js里面的空格和换行全去掉，然后将变量名等替换成a，b这样的名称。如此一来，文件变小了，也让人看不懂了，我们的目的达到了。

2.代码合并。

如上所述，合并代码，可以减少网络请求，提升访问速度，然后是解决代码的互相依赖问题。

3.缓存问题。

有时我们改了某个bug并上线后，用户访问到的仍是旧代码。这就涉及到缓存问题，我们开发阶段可以使用ctrl+f5强制清理缓存，但上线后不可能通知让所有用户强清；所以只能用加版本号的方式。但一个一个手动加十分麻烦，而且容易遗漏，所以我们需要一种自动化工具帮我们做这件事。

4.图片压缩。

做网页肯定离不开图片了。有时我们拿到的一张高清图片体积很大，肯定要经过压缩处理才能使用，这是很常见的需求，就像吃喝拉撒睡一般。

5.生成精灵图。

做过css的同学都知道，一般我们会把图标之类的小图片，统一放在一张精灵图中。

然而在修改频次较高的情况下，频繁的替换精灵图并不是个很好的方案。我们希望，小图片仍旧是小图片，但精灵图可以统一生成，gulp可以帮我们搞定这件事。

6.编译less。

less大家应该都不陌生了，然而它最终仍是需要编译后，才能被浏览器识别的。gulp可以帮我们完成编译，你只需把精力放在less上就好。

7.css前缀。

我们在写css3时，有些属性针对不同浏览器都要写不同的前缀，这个很烦人，这些重复的东西，完全可以由工具来统一添加。

8.语法检查。

我们在写js时，有时会忘了添加分号，用了某个变量却没有声明等错误，能有个工具帮我们检查一遍是再好不过的事情。

9.公共页面复用。

一般网页都有公用的部分，比如头部和尾部。然而html并未提供类似include的方法。如果不分离公用部分，页面一多，改起来就费时了。

gulp可以帮我们达到分离的目的。其实原理很简单，因为它是node写的，会提供一个include关键词给你使用，最终编译成包含头部和尾部的html就可以了。

10.实时刷新。

在调试代码时，为了能看到效果，我们经常会手动刷新。如果你觉得这个也费事的话，可以考虑引入gulp的自动刷新工具，这样你只要一保存代码，马上就会看到效果。

11.来源地图。