利用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
Hexo
#Hexo #Gulp
利用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
许可协议