使用 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
const gulp = require('gulp');
const terser = require('gulp-terser');
const htmlmin = require('gulp-htmlmin');
const svgo = require('gulp-svgo');
const gulpSquoosh = require("gulp-squoosh");
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(svgo())
  .pipe(gulpSquoosh())
  .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

任务结果

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

参考资料