[Gulp.js系列教程][12]优化CSS/JavaScript/Images和HTML

版权声明

本文出自 “ 幻冥极地 ” 博客 ,作者 小貘 采用 署名-非商业性使用-相同方式共享 协议。转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。
https://www.moorehy.com/archives/166

原文跳转:Introduction to Gulp.js 12: Optimize CSS, JavaScript, Images and HTML

这是我Gulp.js系列教程的第12篇。这次我将编写一个优化站点静态资源的任务(task),其中包括CSS/JS/Images/HTML。

被加载的每KB数据豆浆减慢我们站点的加载速度,这就是我们要压缩优化所有CSS&JS&图片的原因,从而可以尽可能多的减少数据量。我还会添加一个用于优化HTML的任务(task),但是我不会使用这个任务,因为压缩的量很小。

CSS

首先我要写一个任务(task),他将用于优化CSS,Compass可以压缩由于生产的CSS,但是这个Gulp.js任务可以将我们的目标文件额外压缩6KB。

安装需要的Gulp.js插件:

这个任务(task)将从静态(assets)文件夹中拷贝CSS文件,最小化,移除注释,输出文件大小,并拷贝他们到目标生产静态(assets)文件夹中。

JavaScript

现在CSS已经被最小化了,接下来我们对JS文件做相同的工作。对这个任务(task)我使用 UglifyJS 。如果你不喜欢它,可以使用 Google Closure 或者 YUI compressor 的Gulp.js任务。

这个任务将获取JS文件,最小化并优化他们,放入生产静态(assets)文件夹下并输出文件大小。

Images

接下来我将处理图片。他们需要被拷贝到生产静态(assets)文件夹下,并被压缩。这可能会需要一点时间,具体取决于你图片的大小,这就是我只在生产部署时进行图片优化的原因。

展示更多细节

为了在Gulp.js中获取更多详细输出,你可以在命令中添加一个标志参数:
gulp publish --verbose 。他将为优化任务列出每个单独的图片,以及他们被压缩了多少。

这个任务我需要 gulp-imagemin ,他可以最小化PNG/JPG/GIF和SVG图片:

这个任务将获取图片,优化,拷贝到静态文件夹并输出大小。

HTML

就像我写这个任务之前说得,你可以看到如何操作,但我不用它。因为压缩量太小了,根本不值得为此而打乱标记(markup)。我更喜欢保持HTML的可读性,以便于其他人可以从中学习。

源码

查看Github上的源码

总结

Gulp.js系列教程的第12部分结束了。今天我们学会了如何最小化CSS/JS文件,以及减小图片尺寸。

发表评论

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