利用Gulp优化Hexo静态资源
本文最后更新于:2022年2月9日 11:19
前言
由于网上使用gulp给hexo进行压缩优化的文章,找到一些方案,但是时间太久,相应的gulp工具也升级一些版本,导致跟教程有差别,我本地无法正确运用指令,今天踩坑一天,故下来以便日后有同样问题的小伙伴,提供借鉴的思路。
优化插件对比:
- hexo-all-minifier,使用hexo 6.0兼容不是特别好,功能是差不多,都提供相应的优化,上手比较快。
- 如果本地能使用该插件,推荐使用
hexo-all-minifier
。 - 如果出现本地依赖无法关联下载,可以考虑删除当前目录的
node_modules
,然后重新下载依赖包。(本人怀疑,如果本地总是安装或者卸载插件,可能会引起npm某些bug导致)
- 如果本地能使用该插件,推荐使用
- Gulp,本身不是给优化使用,但是它提供优化的功能罢了,学习成本高,但是不受hexo版本的影响,可以长期使用。
开始
Gulp简介
用自动化构建工具增强你的工作流程!(A toolkit to automate & enhance your workflow)
安装和配置Gulp
参考官网快速开始吧。
1 |
|
安装必要依赖
注意,如果用淘宝源,直接使用cnpm下载依赖会快不少
1 |
|
编写 gulpfile.js 文件
仅提供参考
1 |
|
package.json参考
自定义scripts,通过
npm run build
=>进行构建,npm run dev
=>本地环境构建并启动服务,npm run deploy
=>构建并部署;
1 |
|
验证
如果执行
gulp
命令有下面的输出,证明已经成功,可以是public目录下面看看成功了喔。
1 |
|
问题与解决思路
- (node:60240) UnhandledPromiseRejectionWarning: Error: spawn /Users/jaryoung/project/myblog/node_modules/_gifsicle@5.2.1@gifsicle/vendor/gifsicle ENOENT
解决思路,不一定正确,根据自己实际情况来处理。gulp-imagemin
,由于8.0.0出现一个比较诡异的问题,所以需要将gulp-imagemin
降级到7.1.0
版本- 但是降级到
7.1.0
会出现有一些依赖找不到的情况,只能一个个来找进行安装(如果有更好的办法,也希望有小伙伴跟我说一下) - 版本依赖情况,根据github来进行一个个版本jar依赖的下载。最终整理为:
npm install -d gulp-imagemin@7.1.0 imagemin@7.0.0 imagemin-optipng@7.0.0 imagemin-mozjpeg@8.0.0 imagemin-svgo@7.0.0 imagemin-gifsicle@7.0.0 gifsicle@5.0.0 --save-dev
,也就是上面步骤给出来的命令
- Error: Cannot find module ‘gifsicle’
Require stack:
解决思路:imagemin-gifsicle@7.0.0
,根据它的版本依赖知道为gifsicle@5.0.0
,进行npm install gifsicle@5.0.0 --save-dev
问题就可以解决。 - imagemin.jpegtran is not a function
解决思路:Had the same problem. The issue is you’re still callingimagemin.jpegtran
in your config, which was replaced byimagemin.mozjpeg
in v7.0.0. 原链接 - 划重点:如果cnpm依赖不会自动下载,可以考虑删除当前项目的
node_modules
重新运用cnpm -i
试试看,其实上面1、2、3点都可以通过这个无脑操作来解决
参考资料
利用Gulp优化Hexo静态资源
https://jaryoung.com/2022/02/04/gulp-optimization-hexo-statict-resources/