使用 Gulp 压缩博客静态资源

网站的访问速度是影响网站阅读量的一个重要因素，因此加速网页的访问速度十分重要。对于加速博客访问速度的方法，可以使用将浏览器第一次加载的数据存入缓存，第二次访问时就能够节省很多时间，这一种方法以及所需的插件，可以参见我之前的文章《加速 Hexo 博客的方法及遇到的问题》，在此不再赘述。在本文中，我主要讲述使用 Gulp 压缩网页源码的方法，这一种方法也可以提升一定的网站访问速度。

为什么要压缩源码

我是采用 Hexo 博客框架搭建的博客，文章的书写是先写入 Markdown 文件，然后通过 Hexo 将 Markdown 文件转换成 HTML 文件。在转换后的 HTML 文件代码中，会留下大量的空白空间，毕竟计算机程序不如人的大脑那么灵活。

◎ 代码中大量的空白

不只是 HTML 文件，网站中引入的 CSS、JavaScript 等文件中也会存在一定的空白。而这些空白在网页的载入的时候，浏览器并不会忽略掉，会消耗一定的时间。因此将这些空白的区域去除很重要。

使用 Gulp 工具，能够很好地压缩静态资源，去除这些空白。

如何使用

目前在网上搜索相关的教程，大都是基于 Gulp v3 版本，而目前 Gulp 已经更新到了 v4，使用旧版本的方法会报错。在这里我提供 Gulp v4 版本的使用方法。

安装插件

全局安装：

1

npm install gulp -g

然后到站点文件夹的根目录安装：

1

npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify --save

在这里说明一下，使用该工具可以压缩 HTML、CSS、JavaScript 文件，但我并没有压缩 JavaScript 文件，因为有很大的概率会报错，实际也并不需要压缩，因为大部分 JavaScript 都已压缩过。

如果你也考虑不压缩 JavaScript 文件，可以选择不安装 gulp-uglify。

配置文件

在站点文件夹的根目录下，新建一个文件，命名为 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

var gulp = require('gulp');

// Plugins 模块获取
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');

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

// 压缩 html
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'))
});

// 压缩 js 不压缩 min.js
gulp.task('minify-js', function () {
	return gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
		.pipe(uglify())
		.pipe(gulp.dest('./public'));
});

// 4.0 以前的写法 
// gulp.task('default', [
  //   'minify-html', 'minify-css', 'minify-js'
// ]);

// 4.0 以后的写法
// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel('minify-html', 'minify-css', 'minify-js'));

如果不压缩 JavaScript 文件，则将上述代码中有关 minify-js 的代码删除即可。

执行命令

hexo clean	//先清理文件
hexo g	//编译生成静态文件
gulp	//Gulp 插件执行压缩任务
hexo s	//开启服务

正常运行后应该显示：

$ gulp
[13:08:13] Using gulpfile G:\Hexo\gulpfile.js
[13:08:13] Starting 'default'...
[13:08:13] Starting 'minify-html'...
[13:08:13] Starting 'minify-css'...
[13:08:15] Finished 'minify-css' after 1.55 s
[13:08:18] Finished 'minify-html' after 4.79 s
[13:08:18] Finished 'default' after 4.79 s

然后你就可以从站点中的 public 文件夹中检查这些文件是否被压缩^[1]。

除了上述方法外，Hexo 还有一个插件（hexo-neat）能够压缩静态资源。不过我并没有使用过，如果你想要使用这个插件也可以试一试。另外，我还使用 Gulp 结合 workbox-build 实现了博客的 PWA 功能，具体的介绍可以看这篇文章。