博客优化之压缩HTML静态文件

发表于   |   分类于

本文来自博客issue#16

使用了next主题之后，默认生成的HTML文件中，会出现大量的空行。直接查看网页源代码就能够看到。

hexo默认没有提供压缩HTML/CSS/JS的功能，但我们可以通过另外的途径进行代码的压缩。

之前的版本，有一个名为hexo-generator-minify的插件，但已经无人维护，不支持hexo 3.x版本。

官方插件库能搜到的压缩插件，均有不同程度的问题。详情这里不表，具体诸君可以自行安装测试。

这里介绍一种gulp自动化任务压缩的方式来处理这个问题，缺陷就是每一次blog在deploy的时候都需要事先执行一次这个压缩任务。

本人的博客曾经开启过压缩功能，但后来放弃了。一方面是嫌麻烦，一方面也是觉得暂时没有这个必要

本人采用的具体压缩工具为：

  • gulp-htmlmin，该插件对HTML代码进行压缩。
  • gulp-htmlclean，该插件对HTML进行代码清理，去除不必要的空行等。
  • gulp-clean-css，该插件对CSS代码进行压缩与清理。

另外有一个图片压缩工具，暂未使用：gulp-imagemin

JS压缩工具可以参考：gulp-uglify、UglifyJS2。

引入各种插件：

1
2
3
4
5
6
var gulp = require('gulp');

var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var cleanCSS = require('gulp-clean-css');
var imagemin = require('gulp-imagemin');

本人采用的核心的任务代码如下：

1
2
3
4
5
6
7
8
9
10
11
gulp.task('minify-html', function() {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
         removeComments: true,
         minifyJS: false,
         minifyCSS: true,
         minifyURLs: false,
    }))
    .pipe(gulp.dest('./public'))
});

那么，在每一次deploy之前，在Git Bash下执行一次gulp minify-html即可对所有的HTML代码进行压缩。

CSS和JS的压缩可以编写类似的代码，这里不再赘述。