前段时间跟着学习小组进行了 gulp 的学习,对 gulp 算是有了个初步的,空洞的了解。最近两周,一直在进行前端代码编写,很多工程化的需求逐渐出现,于是开始实践 gulp,试图形成一个稳定的工作流程。

可以在 https://github.com/YanisJ/ife-mission-starter 查看到项目完整结构和内容。

由于我很可能会对项目进行修改,如果遇到文章中内容与项目内容冲突,以项目为准。我也会经常更新文章。

浏览器自动刷新

Live reloading 绝对是一个刚性需求,自然就成为了我第一个需要解决的问题。在 ng2 的学习中,接触到了 lite-server:一个简易服务器,不需任何配置,提供 browser-sync 的功能。由于它实在是简单易用,成为了我的第一个选择。

于是我对 package.json 进行了简单的修改:

安装:

启动:

这样,就有了一个具备自动刷新功能的工作环境。

开始使用 gulp

很快,我碰到了第二个需求,我的代码需要有在线 demo,最好能将 CSS,JavaScript 代码进行一些处理。其实,demo 里的这些代码量有限,处不处理意义不大,但这里存在一个相关的问题:图片。Demo 虽然小,但图片总是有的,压缩对于图片来说意义就大多了。

经过一番查阅,我在 gulp 插件搜索页面 找到了几个需要用到的插件:

这里没有关于 JavaScript 的任何插件,因为按我目前的实际情况来说,压缩 JavaScript 代码不是一个好主意。插件确定了,开始修改 package.json:

然后,创建了 gulpfile.js:

这里不对代码进行细致解释,有疑问可以参看 奇迹 Blog 中 gulp 相关文章

完成 gulpfile.js 编写后,在命令行中键入 gulp,即可在输出目录中生成已压缩完成的代码,算是完成了项目中 gulp 的基本搭建。

图片缓存

在使用 gulp 压缩几次过后,出现了新问题。代码压缩需要的时间很短,但图片压缩用时很长。每次使用 gulp,都会重新把所有图片压缩一遍,图片越来越多,需要的时间越来越长,而且绝大部分工作都是重复的。于是又开始了新一轮的查阅,最后找到了这个:

  • gulp-cache:在压缩图片处理中使用,当图片发生变化时才进行压缩。

只需要对 gulpfile.js 进行小小的修改:

这样已经存在的图片不会再被反复压缩,大大缩短 gulp 执行时间。

JSHint

随着项目的进行,我发现 JSHint 是个不错的工具,能对 JavaScript 代码进行一些检查,提高代码质量。最开始,我把 JSHint 放在 ‘js’ 任务中,随后意识到,一般只有代码基本完成后,我才需要压缩它,而在编写代码过程中,JSHint 就能发挥作用。于是添加了一个 task:

平时在命令行中,使用以下命令来进行代码检查:

每次自己手动敲命令检查代码实在有些傻,于是引入了插件 gulp-watch:

将 ‘hint’ 任务改为:

当执行 gulp hint 后,命令行将挂起一个服务,每当 JavaScript 文件的修改被保存,就能自动检查代码。

浏览器刷新 with gulp

现在,项目中挂着两个服务,一个是 lite-server,用来刷新浏览器,另一个是 gulp hint,用来检查 JavaScript 代码。是时候放弃 lite-server,直接用 gulp 来提供浏览器刷新功能,将两个服务合一。

至此,使用 gulp 构建了一个具备压缩、检查、刷新浏览器功能的工作环境。

发表评论

电子邮件地址不会被公开。 必填项已用*标注