gulp压缩博客资源
前言
gulp
能够帮助用户自动压缩静态资源,配合各类下属插件,能够压缩包括 css、js、html
乃至各类格式的图片文件。(图片文件的压缩往往只能节省几十 KB,效果远远不如 imagine
、tinypng
等压缩方式,所以此处不再写使用 gulp
压缩图片的内容)。
如果需要压缩图片的话推荐使用图片在线压缩工具,将图像转换为WebP格式。WebP这是支持在互联网上无损和有损图像质量压缩的新格式。谷歌公司开发这种格式专为在网上迅速和方便地做好工作。其主要优点是,相对于其他图像格式,文件小,但图像质量相似。
配置教程
安装
Gulp
插件:在博客根目录[Blogroot]
打开终端,输入:npm install gulp #安装gulp插件
安装各个下属插件以实现对各类静态资源的压缩。
压缩 HTML:
npm install gulp-htmlclean # 清理html
npm install gulp-htmlmin # 压缩html压缩 CSS:
npm install gulp-minify-css # 压缩css
压缩JS
npm install gulp-uglify # 混淆js
压缩字体包
字体文件作为最让人又爱又恨的静态资源,为了保证站点文字匹配,全字库字体包一般都有10多M,这对博客的加载速度造成了巨大压力。fontmin 可以遍历博客内用到的字符,并将字体包内这些字符的字体样式提取出来输出为新的字体包。
font-min 仅支持压缩 ttf 格式的字体包。npm install gulp-fontmin # 压缩ttf
- 为
Gulp
创建gulpfile.js
任务脚本。在博客根目录[Blogroot]
下新建gulpfile.js
, 打开[Blogroot]\gulpfile.js
, 输入以下内容:
//用到的各个插件 |
- 在每次运行完
hexo generate
生成静态页面后,运行gulp
对其进行压缩。指令流程如下:
hexo clean |
- 关于 font-min 的补充说明,在本文中,是通过读取所有编译好的 html 文件(
./public/**/*.html
)中的字符,然后匹配原有字体包内./public/font/*.ttf
字体样式,输出压缩后的字体包到./public/font/
目录。所以最终引用字体的相对路径应该是/font/*.ttf
。而本地测试时,如果没有运行gulp
,自然也就不会输出压缩字体包到public
目录,也就看不到字体样式。
本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 青衣墨客!
评论