0%

使用 Gulp 精简 Hexo

精简可能导致本地预览与最终发布的版本有所差异甚至产生 BUG,所以开启个别选项需要慎重。

为了更好地应对 ES6 语法,本博客已弃用 Babel 与 Uglify。

gulp 是基于流的自动化构建工具,使用 gulp 以及 gulp 插件我们可以达成很多目的,比如精简 Hexo 项目。

安装依赖

gulp 本体

1
2
# 全局安装
npm i gulp -g

gulp 插件

1
2
3
4
5
6
7
8
# 进入 Hexo 目录内运行命令安装
# 使用 --save-dev,与 Hexo 当前的依赖区分开来
npm i --save-dev \
gulp-terser\
gulp-htmlmin \
gulp-imagemin \
gulp-clean-css \
gulp-minify-inline

搭建任务

gulp 任务流程通过 gulpfile.js 文件控制。

首先在 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
const gulp = require('gulp');
const terser = require('gulp-terser');
const htmlmin = require('gulp-htmlmin');
const imagemin = require('gulp-imagemin');
const cleanCSS = require('gulp-clean-css');
const minifyInline = require('gulp-minify-inline');

gulp.task('minify-html', () => {
return gulp.src('./public/**/*.html')
.pipe(htmlmin({
minifyURLs: true, // Minify URLs in various attributes (uses relateurl)
useShortDoctype: true, // Replaces the doctype with the short (HTML5) doctype
collapseWhitespace: true, // Collapse white space that contributes to text nodes in a document tree
conservativeCollapse: true, // Always collapse to 1 space (never remove it entirely). Must be used in conjunction with collapseWhitespace=true
collapseInlineTagWhitespace: true, // Don't leave any spaces between display:inline; elements when collapsing. Must be used in conjunction with collapseWhitespace=true
collapseBooleanAttributes: true, // Omit attribute values from boolean attributes
removeComments: true, // Strip HTML comments
removeEmptyAttributes: true, // Remove all attributes with whitespace-only values
removeScriptTypeAttributes: true, // Remove type="text/javascript" from script tags. Other type attribute values are left intact
removeStyleLinkTypeAttributes: true // Remove type="text/css" from style and link tags. Other type attribute values are left intact
}))
.pipe(minifyInline())
.pipe(gulp.dest('./public'));
});

gulp.task('minify-css', () => {
return gulp.src('./public/**/*.css', '!./public/**/*.min.css')
.pipe(cleanCSS({debug: true}, details => {
console.log(`${details.name}: ${details.stats.originalSize}`);
console.log(`${details.name}: ${details.stats.minifiedSize}`);
}))
.pipe(gulp.dest('./public'));
});

gulp.task('minify-js', () => {
return gulp.src([
'./public/**/*.js',
'!./public/**/*.min.js',
'!./public/**/*.umd.js'
])
.pipe(terser({
keep_fnames: true,
mangle: false
}))
.pipe(gulp.dest('./public'));
});

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

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

运行任务

之前全局安装了 Gulp,在 Hexo 项目内执行命令还需要运行:

1
npm link gulp

Gulp 精简的内容是 public 目录下的内容,所以还需要执行:

1
hexo cl && hexo g

最后运行 Gulp 任务

1
gulp

任务结果

甩张图吧,任务成功运行大概就是这样子,具体结果自行比对即可。

参考资料

正在加载今日诗词....