对Hexo博客静态资源进行压缩

前言

最近在查看 Hexo 博客的 html 文件时,突然发现这些 html 文件中,有很多的空格与换行,看着很不舒服,强迫症表示忍不了。

就像下面这样,多出很多换行,看着很不舒服,也拖慢了博客的加载速度。

找解决方案

首先百度找下相关资料,嗯,比较流行的就两方法,一种是使用 Hexo 的代码压缩插件 hexo-neat 进行配置,优点就是不需要进行复杂的配置,安装好了,设置几个参数,在执行 hexo g 命令时生成的文件就是压缩好的,但是,我使用了没有效果,原因未知,偷懒失败。

还有一种就是使用 gulp 对代码进行压缩,压缩完成后,再推送到服务器就行,缺点就是,配置复杂,需要用到多个软件包,代码也要自己写,这个坑也比较多,但是,我用这个方法成功了。

还有就是不得不吐槽一下,百度上面找到的资料,全是一个抄一个的,一个字都不带变的,服了,笔记能不能自己写啊,抄别人的有个什么意义?

安装依赖
  • 安装 cnpm

因为 npm 服务器速度很感人,所以我使用的是 cnpm ,下载速度会快很多,若你使用 npm 安装感觉下载太慢,请使用 cnpm

执行

1
$ npm install -g cnpm --registry=https://registry.npm.taobao.org

安装 cnpm 后,你就可以使用 cnpm 命令安装软件包了。

  • 安装gulp相关依赖

首先将 gulp 安装到全局中,否则无法使用,百度到的各种博客文章,就没有人说过这个问题

1
$ cnpm install gulp -g
    • 安装方式一:

然后下面再将其安装到项目中

1
$ cnpm install gulp gulp-imagemin gulp-minify-css gulp-minify-html gulp-uglify --save
    • 安装方式二:

你也可以直接将需要的依赖放在 package.jsondevDependencies 字段中,好处就是能够保证你安装的版本和我的一样,可以避免因为版本的原因而出现问题

1
2
3
4
5
6
7
"dependencies": {
"gulp": "^4.0.2",
"gulp-imagemin": "^6.2.0",
"gulp-minify-css": "^1.2.4",
"gulp-minify-html": "^1.0.6",
"gulp-uglify": "^3.0.2",
}

添加完成之后执行 cnpm install 命令就会自动安装添加的依赖。

创建 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
var gulp = require('gulp');

//Plugins模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var minifyhtml = require('gulp-minify-html');
var imagemin = require('gulp-imagemin')

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

// 压缩 public 目录 html文件
gulp.task('minify-html', function () {
return gulp.src('./public/**/*.html')
.pipe(minifyhtml())
.pipe(gulp.dest('./public'))
});

// 压缩 public/js 目录 js文件
gulp.task('minify-js', function () {
return gulp.src('./public/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});

// 压缩public/posts 目录 图片文件
gulp.task('minify-img', function () {
return gulp.src('./public/**/*.*')
.pipe(imagemin(
[
imagemin.gifsicle({
'optimizationLevel': 3
}),
imagemin.jpegtran({
'progressive': true
}),
imagemin.optipng({
'optimizationLevel': 7
}),
imagemin.svgo()
], {
'verbose': true
}))
.pipe(gulp.dest('./public'))
});

// 分别执行css、heml、js和图片的压缩任务
gulp.task('build', gulp.series('minify-css', 'minify-html', 'minify-js', 'minify-img'));

注意:

    1. 以上代码是运行在 gulp4 环境的,与 gulp3 不通用
    1. 图片压缩速度很慢,若不需要压缩图片,请将第52行的代码中的 'minify-img' 删除,忽略其它文件压缩同理。
对代码进行压缩
1
2
3
4
$ hexo clean
$ hexo g
$ gulp build
$ hexo d

先清空文件,生成静态文件,然后使用 gulp 命令对代码进行压缩,最后将其推送到服务器就行了

对代码进行简化

如上面所示,需要执行四条代码,才算是一个完整的博客发布步骤,是不是感觉代码好多懒得打?你还有更简单的选择。

package.json 中加入如下字段:

1
2
3
"scripts": {
"hexo": "hexo clean && hexo g && gulp build && hexo d"
}

这样,每次需要发布文章时,只需要执行

1
$ npm run hexo

这样,就等同于执行了 清空、生成、压缩与发布 这四个步骤的所有命令

压缩效果

如图所示,是压缩后的效果,还是不错的