萌樱の小窝

我永远喜欢樱.jpg

用 Gulp 优化 Hexo

MoeSakura's Avatar 2020-01-04

  1. 1. 食用方法
  2. 2. 参考

萌樱这两天把博客从 Typecho 搬到 Hexo ,主题也从 handsome 换成 Suka 了,部署在 GitHub 。Hexo 的纯静态页面加载真的很快,真香警告。

虽然 Hexo 速度已经很快了,但我们还可以用 Gulp 继续优化 Hexo 。萌樱这里分享一个 Google 大法找到食用起来很方便的 gulpfile.js 。

食用方法

1
2
npm install -g gulp
npm install gulp gulp-htmlclean gulp-htmlmin gulp-clean-css gulp-uglify-es gulp-imagemin del gulp-minify-inline-json --save-dev

在 Hexo 文件夹下新建一个 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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify-es').default;
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var Hexo = require('hexo');
var minifyInlineJSON = require('gulp-minify-inline-json');

gulp.task('clean', function () {
return del(['public/**/*']);
});

var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function (cb) {
hexo.init().then(function () {
return hexo.call('generate', {
watch: false
});
}).then(function () {
return hexo.exit();
}).then(function () {
return cb()
}).catch(function (err) {
console.log(err);
hexo.exit(err);
return cb(err);
})
});

gulp.task('deploy', function () {
return hexo.init().then(function () {
return hexo.call('deploy', {
watch: false
}).then(function () {
return hexo.exit();
}).catch(function (err) {
return hexo.exit(err);
});
});
});

gulp.task('minify-css', function () {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});

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

gulp.task('minify-img', function () {
return gulp.src('./public/img/**/*')
.pipe(imagemin([
imagemin.gifsicle({
interlaced: true
}),
imagemin.jpegtran({
progressive: true
}),
imagemin.optipng({
optimizationLevel: 5
}),
imagemin.svgo({
plugins: [{
removeViewBox: true
}, {
cleanupIDs: false
}]
})
]))
.pipe(gulp.dest('./public/img'))
});

gulp.task('minify-js', function () {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

gulp.task('minifyInlineJSON', function () {
return gulp.src('./public/**/*.html')
.pipe(minifyInlineJSON())
.pipe(gulp.dest('./public'));
});

gulp.task('compress', gulp.series('minify-html', 'minify-css', 'minify-img', 'minify-js', 'minifyInlineJSON'));

gulp.task('default', gulp.series('clean', 'generate', 'compress', 'deploy'));

用 Hexo 生成页面后,运行 Gulp 即可

1
2
hexo g  # 生成页面
gulp # 包含 hexo d

😋 Enjoy it !

参考

Optimize Hexo With Gulp

本文作者 : MoeSakura
本文使用 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议
本文链接 : https://moesakura.world/archives/hexo-gulp/

本文最后更新于 天前,文中所描述的信息可能已发生改变