细说gulp

细说gulp

一、概述&安装

Gulp，简而言之，就是前端自动化开发工具，利用它，我们可以提高开发效率。

比如：

　　1、 压缩js

　　2、 压缩css

　　3、 压缩less

　　4、 压缩图片

　　等等…

我们完全可以利用Gulp来自动化地完成这些重复性很强的工作。

好了，废话不多说了。既然要了解Gulp，就得先安装它。

Gulp是基于node来实现的，so你得先有个node环境（见“初探nodeJS”）。

node环境有了后，安装Gulp就很easy咯。

命令行中，输入npm install gulp –g就OK啦。（-g代表全局）。

如下：

EntireCode
好了，在node环境下运行上述代码，不过不是利用node哈，因为是gulp，所以得用gulp命令，如下（’firstScript’为刚才自定义的任务名）：

EntireCode
执行上述，只需在node环境下输入gulp auto就OK啦，一旦script文件下的js文件改变，它就自动压缩。

且，因为是监听，所以当输入gulp auto时，不会首先压缩一遍script下js文件。

But，我们不还得输入’auto’这个任务名吗？！！

所以，为了更加完善，我们可以这么做：

EntireCode
注：default任务名不能改变哦。

这样我们就可以直接在node环境下：gulp + 回车，去执行default中的相关任务。

但，上述代码还是不够完美，且不足还很大，就是：当gulp.watch方法监听到script文件夹中的某个js代码发生改变时，gulp会将script下所有的js都压缩一遍，极大地影响性能。(不信，自己可以测试下)

纳尼？这可如何是好。

不用怕，利用gulp-watch-path这个模块，就可以做到修改了什么，就实时压缩对应文件，而不是盲目地全压缩。

代码如下：

EntireCode
上述代码已经很完美了，但是压缩的文件名与没压缩的文件名一样滴，总感觉怪怪的，不是么？通常压缩文件应该带有min的后缀吧。所以我们再来修改修改。

引入gulp-rename这个模块，用于重命名压缩后的文件。

代码如下：

EntireCode
OK，gulp来压缩JavaScript之路，就到此为止咯。

三、其他

类似的：CSS、LESS、图片等的压缩与上述”小试牛刀之压缩JavaScript”其实是一样的道理，唯一的不同就是它们所引入的压缩包不一样。

如：

　　CSS ----- 对应gulp-minify-css模块

　　LESS ----- 对应gulp-less模块

　　图片 ----- 对应gulp-imagemin模块

　　...

晚安，everyone~