利用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
2
3
4
5
6
7
8
9
npm install --global gulp-cli

npm install gulp --save
npm install gulp-babel babel-preset-env babel-preset-mobx --save

# 如果下面这样子显示,说明是安装成功:
gulp -v
CLI version: 2.3.0
Local version: 4.0.2

安装必要依赖

注意,如果用淘宝源,直接使用cnpm下载依赖会快不少

1
2
3
npm install -D @babel/core @babel/preset-react @babel/preset-env --save
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save
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

编写 gulpfile.js 文件

仅提供参考

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
//Plugins模块获取
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

var imagemin = require('gulp-imagemin');
var imageminOptipng = require('imagemin-optipng');
var imageminSvgo = require('imagemin-svgo');
var imageminMozjpeg = require('imagemin-mozjpeg');
var imageminGifsicle = require('imagemin-gifsicle');

//压缩css
gulp.task('minify-css', async function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss())
.pipe(gulp.dest('./public'));
});

//压缩html
gulp.task('minify-html', async function () {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true,
minifyJS: true,
minifyCSS: true,
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});

//压缩js 不压缩min.js
gulp.task('minify-js', async function () {
return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

// 压缩 public/images 目录内图片(Version>3)
gulp.task('minify-images', async function (done) {
gulp.src('./public/images/**/*.*', './public/img/**/*.*')
.pipe(imagemin([
imageminGifsicle({ interlaced: true }),
imageminMozjpeg({ progressive: true }),
imageminOptipng({ optimizationLevel: 5 }),
imageminSvgo({
plugins: [
{ removeViewBox: true },
{ cleanupIDs: false }
]
})
]))
.pipe(gulp.dest('./public/images', './public/img'));
done();
});

// 开始任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js','minify-images', async function () {
// Do something after a, b, and c are finished.
}));

package.json参考

自定义scripts,通过 npm run build =>进行构建,npm run dev=>本地环境构建并启动服务,npm run deploy=>构建并部署;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
	{
"name": "hexo-site",
"version": "0.0.1",
"private": true,
"hexo": {
"version": "6.0.0"
},
"scripts": {
"build": "hexo clean && hexo g && gulp",
"dev": "hexo clean && hexo g && gulp && hexo s",
"deploy": "hexo clean && hexo g && gulp && hexo deploy"
},
"dependencies": {
"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-preset-env": "^1.7.0",
"babel-preset-es2015": "^6.24.1",
"babel-preset-mobx": "^2.0.0",
"bulma-stylus": "^0.8.0",
"gulp": "^4.0.2",
"gulp-babel": "^8.0.0",
"gulp-clean-css": "^4.3.0",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.2",
"hexo": "^6.0.0",
"hexo-baidu-url-submit": "^0.0.6",
"hexo-component-inferno": "^1.0.2",
"hexo-deployer-git": "^3.0.0",
"hexo-generator-archive": "^1.0.0",
"hexo-generator-category": "^1.0.0",
"hexo-generator-feed": "^3.0.0",
"hexo-generator-index": "^2.0.0",
"hexo-generator-searchdb": "^1.4.0",
"hexo-generator-tag": "^1.0.0",
"hexo-lazyload": "^1.3.6",
"hexo-leancloud-counter-security": "^1.5.0",
"hexo-log": "^3.0.0",
"hexo-pagination": "^2.0.0",
"hexo-renderer-ejs": "^2.0.0",
"hexo-renderer-inferno": "^0.1.3",
"hexo-renderer-marked": "^5.0.0",
"hexo-renderer-pug": "^2.0.0",
"hexo-renderer-stylus": "^2.0.1",
"hexo-server": "^3.0.0",
"hexo-service-worker": "^1.0.1",
"hexo-wordcount": "^6.0.1"
},
"devDependencies": {
"@babel/core": "^7.17.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"gulp-htmlclean": "^2.7.22",
"gulp-htmlmin": "^5.0.1",
"gulp-imagemin": "^7.1.0",
"gulp-minify-css": "^1.2.4",
"gulp-uglify": "^3.0.2",
"imagemin": "^7.0.0",
"imagemin-gifsicle": "^7.0.0",
"gifsicle": "^5.0.0",
"imagemin-mozjpeg": "^8.0.0",
"imagemin-optipng": "^7.0.0",
"imagemin-svgo": "^7.0.0"
}
}

验证

如果执行gulp命令有下面的输出,证明已经成功,可以是public目录下面看看成功了喔。

1
2
3
4
5
6
7
8
9
10

INFO Total precache size is about 38.7 kB for 3 resources.
[17:43:34] Using gulpfile ~/project/myblog/gulpfile.js
[17:43:34] Starting 'default'...
[17:43:34] Starting 'minify-images'...
[17:43:34] Starting '<anonymous>'...
[17:43:34] Finished 'minify-images' after 11 ms
[17:43:34] Finished '<anonymous>' after 13 ms
[17:43:34] Finished 'default' after 15 ms
[17:43:42] gulp-imagemin: Minified 11 images (saved 177 kB - 35.3%)

问题与解决思路

  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 ,也就是上面步骤给出来的命令
  2. Error: Cannot find module ‘gifsicle’
    Require stack:
    解决思路:imagemin-gifsicle@7.0.0,根据它的版本依赖知道为gifsicle@5.0.0,进行npm install gifsicle@5.0.0 --save-dev问题就可以解决。
  3. imagemin.jpegtran is not a function
    解决思路:Had the same problem. The issue is you’re still calling imagemin.jpegtran in your config, which was replaced by imagemin.mozjpeg in v7.0.0. 原链接
  4. 划重点:如果cnpm依赖不会自动下载,可以考虑删除当前项目的node_modules重新运用cnpm -i试试看,其实上面1、2、3点都可以通过这个无脑操作来解决

参考资料

  1. Hexo优化:使用gulp压缩静态资源
  2. Hexo使用Gulp压缩静态资源
  3. https://giters.com/sindresorhus/gulp-imagemin/issues/365

利用Gulp优化Hexo静态资源
https://jaryoung.com/2022/02/04/gulp-optimization-hexo-statict-resources/
作者
Jerry Wu
发布于
2022年2月4日 18:24
更新于
2022年2月9日 11:19
许可协议