网 站的访问速度是影响网站阅读量的一个重要因素，因此加速网页的访问速度十分重要。对于加速博客访问速度的方法，可以使用将浏览器第一次加载的数据存入缓存，第二次访问时就能够节省很多时间，这一种方法以及所需的插件，可以参见我之前的文章《加速 Hexo 博客的方法及遇到的问题 》，在此不再赘述。在本文中，我主要讲述使用 Gulp 压缩网页源码的方法，这一种方法也可以提升一定的网站访问速度。
我是采用 Hexo 博客框架搭建的博客，文章的书写是先写入 Markdown 文件，然后通过 Hexo 将 Markdown 文件转换成 HTML 文件。在转换后的 HTML 文件代码中，会留下大量的空白空间，毕竟计算机程序不如人的大脑那么灵活。
※ 代码中大量的空白
不只是 HTML 文件，网站中引入的 CSS、JavaScript 等文件中也会存在一定的空白。而这些空白在网页的载入的时候，浏览器并不会忽略掉，会消耗一定的时间。因此将这些空白的区域去除很重要。
使用 Gulp 工具，能够很好地压缩静态资源，去除这些空白。
目前在网上搜索相关的教程，大都是基于 Gulp v3 版本，而目前 Gulp 已经更新到了 v4，使用旧版本的方法会报错。在这里我提供 Gulp v4 版本的使用方法。
全局安装：
然后到站点文件夹的根目录安装：
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 的代码删除即可。
1
2
3
4
hexo clean //先清理文件
hexo g //编译生成静态文件
gulp //Gulp 插件执行压缩任务
hexo s //开启服务
正常运行后应该显示：
1
2
3
4
5
6
7
8
$ 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 文件夹中检查这些文件是否被压缩
除了上述方法外，Hexo 还有一个插件（hexo-neat ）能够压缩静态资源。不过我并没有使用过，如果你想要使用这个插件也可以试一试。另外，我还使用 Gulp 结合 workbox-build 实现了博客的 PWA 功能，具体的介绍可以看这篇文章 。
※ 代码中大量的空白