做一点关于Gulp的记录

这是一篇很浅的文章,请不要抱有太多期待+_+

可能在几年前,前端开发可能还只是个体力活,开发师所掌握的领域除了CSS就只有JavaScript了,但前端还是在网页开发里属于一个很重要的环节,直到现在可能前端已经是一个网站的全部了。

想想在自己初中的时候,下载了一份还是Macromedia的Dreamweaver,也不知道这个软件到底有什么用,捣鼓了半天无解就放弃了。同时也想了想自己现在使用的Phpstorm,同样也没有摸透这个IDE的全部功能。就和当年Dreamweaver一样,面对这么强大的IDE软件,有没有什么办法能提高自己的效率同时又不用花费太多时间研究IDE的特性呢?于是就找到了一个能帮助到我的做前端开发的工具 — Gulp

Gulp是什么?

Gulp 是一款基于任务的设计模式的自动化工具,能给你的开发效率来一次飞跃。

什么太简单了?那这里还有一篇比较详细的介绍。简单来说Gulp能帮到你无微不至,让你从此感觉写代码是如此开心(误)。

那Gulp到底怎么用?

首先当然是安装她啦!

当然你也可以使用devDependencies或者package.json来进行安装。
之后你就可以在你项目的根目录上建立一个gulpfiles.js的文件。

这样,只要在命令行里输入

或者

就可以分别执行default或者ooxx的任务了。

是不是很简单?
所以只要使用了Gulp,搭配其拓展就可以提高你开发的速度。

一个简单的例子:Compile Less

这样,你less文件夹底下所有的less文件变成在css文件夹里的css文件。

当然Gulp不止可以用来只做一个方面的任务,他还可以这样:

这段代码不仅生成了css文件同时也最小化了你的css文件,更提供了一份样式文件的Source Map,这样你在前台的时候也不会害怕找不到自己的样式在哪一个less或者scss文件里了。

我懂了,但还有什么好玩的东西吗?

Gulp Watch
功能和大多数IDE软件的File Watch一样,侦测你项目里的css,js,image亦或者是image的变化来compile。个人感觉比Phpstorm的File Watch好用太多。

Live Reload
一个很好用的功能,虽然不是Gulp本家的,但是与gulp watch一起使用的话效果卓越。作用就是不用刷新的情况下,通过其port来加载你修改过的脚本或者样式文件。

推荐搭配使用的是Chrome的一个插件,好处是自由加载,比用gulp加载js文件结果导致你没有开live reload的网页慢的要死好太多了。

CSS Sprite
其实我以前做Sprite图一直是用PhotoShop老老实实一个一个做上去的,然后再自己算background position。现在想想 — 呵呵=.=

后话

为什么使用gulp?原因很简单,第一次使用的工具。虽然后面自己也断断续续使用过grunt或者是compass,但是还是对gulp情有独钟,或许只是自己懒而已。Lilim主题在使用gulp一起开发的情况下,速度飞跃,但是还是抵不过自己的懒癌晚期。综上所述,不怕神一样的对手,就怕猪一样的队(zi)友(ji)

PS1:如果你对gulp感兴趣,可以试着去摸索她,你已经会喜欢她的。如果已经和她交往很久请继续爱戴她呵护她。
PS2:有了她,我终于不需要这个网页

More?

Credits 41139382

This work is licensed under a cc by-nc-sa 4.0.