用Gulp实现Hexo网页压缩优化

背景

经过一段时间的折腾，也算是把这个Hexo的个人博客搭建起来了，换主题，加插件，文章里加图片是什么的，就发现网站有时候会有点慢，于是开始考虑做SEO以及一些优化工作，于是乎发现了Gulp这个神器。

Gulp是什么

Hexo生成的静态网页其实是可读性比较好的，会有大量的空格、换行什么的，而实际浏览器解析式完全不需要的。如果把这些空格、换行全部删掉，就会节省很多空间出来，于是网站的响应速度也就变快了。

而Gulp是一种基于node的自动化构建工具，至于自动化构建这个我们目前不需要纠结，我们只要知道它有一些插件可以帮助我们自动化的对hexo生成的各种文件进行压缩。

Gulp怎么用

首先我们要在全局安装下gulp和我们要用到的插件

1 2	npm install gulp -g npm install gulp gulp-uglify gulp-minify-css gulp-imagemin gulp-htmlmin gulp-htmlclean gulp-concat --save

在hexo的根目录创建一个gulpfile.js文件

先放代码：

var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    cssmin = require('gulp-minify-css'),
    imagemin = require('gulp-imagemin'),
    htmlmin = require('gulp-htmlmin'),
    htmlclean = require('gulp-htmlclean');
    concat = require('gulp-concat');
//JS压缩
gulp.task('uglify', function() {
    return gulp.src(['./public/js/**/.js','!./public/js/**/*min.js'])//只是排除min.js文件还是不严谨，一般不会有问题，根据自己博客的修改我的修改为return gulp.src(['./public/**/*.js','!./public/zuoxi/**/*.js',,'!./public/radio/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public/js'));//对应修改为./public即可
});
//public-fancybox-js压缩
gulp.task('fancybox:js', function() {
    return gulp.src('./public/vendors/fancybox/source/jquery.fancybox.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public/vendors/fancybox/source/'));
});
// 合并 JS
gulp.task('jsall', function () {
    return gulp.src('./public/**/*.js')
    // 压缩后重命名
        .pipe(concat('app.js'))
        .pipe(gulp.dest('./public'));
});
//public-fancybox-css压缩
gulp.task('fancybox:css', function() {
    return gulp.src('./public/vendors/fancybox/source/jquery.fancybox.css')
        .pipe(cssmin())
        .pipe(gulp.dest('./public/vendors/fancybox/source/'));
});
//CSS压缩
gulp.task('cssmin', function() {
    return gulp.src(['./public/css/main.css','!./public/css/*min.css'])   
        .pipe(cssmin())
        .pipe(gulp.dest('./public/css/'));
});
//图片压缩
gulp.task('images', function() {
    gulp.src('./public/uploads/*.*')
        .pipe(imagemin({
            progressive: false
        }))
        .pipe(gulp.dest('./public/uploads/'));
});
// 压缩 public 目录 html文件 public/**/*.hmtl 表示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'))
});
// gulp.task('default', gulp.series('uglify', 'cssmin', 'fancybox:js', 'fancybox:css', 'jsall','images'));
gulp.task('default', gulp.series('uglify', 'cssmin', 'jsall', 'minify-html'));

//, 'minify-html'

这里要注意的是，默认安装的是gulp 4.0.0，而网上很多例子是基于gulp 3的，所以运行起来会有如下的报错：

assert.js:351
    throw err;
    ^

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (/Users/zhengk/Desktop/hexo/blog/node_modules/_undertaker@1.2.0@undertaker/lib/set-task.js:10:3)
    at Gulp.task (/Users/zhengk/Desktop/hexo/blog/node_modules/_undertaker@1.2.0@undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/Users/zhengk/Desktop/hexo/blog/gulpfile.js:59:6)
    at Module._compile (internal/modules/cjs/loader.js:721:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:732:10)
    at Module.load (internal/modules/cjs/loader.js:620:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:560:12)
    at Function.Module._load (internal/modules/cjs/loader.js:552:3)
    at Module.require (internal/modules/cjs/loader.js:657:17)
    at require (internal/modules/cjs/helpers.js:22:18)

这是由于gulp4中需要使用gulp.series 和 gulp.parallel来指定运行的任务。具体见上面gulpfile.js中的最后一行。

1	gulp.task('default', gulp.series('uglify', 'cssmin', 'jsall', 'minify-html'));

https://blog.csdn.net/qq_31975963/article/details/83034450

这一行是写明gulp需要执行的任务，然后需要注意的是，当其中某个任务失败或者没有东西需要压缩的时候，比如你没有用到fancybox却要执行fancybox:js任务，就会有如下的报错：

[23:59:25] Using gulpfile ~/Desktop/hexo/blog/gulpfile.js
[23:59:25] Starting 'default'...
[23:59:25] Starting 'uglify'...
[23:59:25] Finished 'uglify' after 24 ms
[23:59:25] Starting 'cssmin'...
[23:59:26] Finished 'cssmin' after 215 ms
[23:59:26] Starting 'fancybox:js'...
[23:59:26] 'fancybox:js' errored after 2.96 ms
[23:59:26] Error: File not found with singular glob: /Users/zhengk/Desktop/hexo/blog/public/vendors/fancybox/source/jquery.fancybox.js (if this was purposeful, use `allowEmpty` option)
    at Glob.<anonymous> (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob-stream@6.1.0@glob-stream/readable.js:84:17)
    at Object.onceWrapper (events.js:277:13)
    at Glob.emit (events.js:189:13)
    at Glob.EventEmitter.emit (domain.js:441:20)
    at Glob._finish (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:197:8)
    at done (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:182:14)
    at Glob._processSimple2 (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:688:12)
    at /Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:676:10
    at Glob._stat2 (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:772:12)
    at lstatcb_ (/Users/zhengk/Desktop/hexo/blog/node_modules/_glob@7.1.3@glob/glob.js:764:12)
[23:59:26] 'default' errored after 246 ms

只要把对应的任务删掉就好了。

运行gult

先执行hexo g来生成静态网页，然后我们看下public文件夹下的静态文件大小：

$ls -lh
...
-rw-r--r--   1 zhengk  staff    57K 12 30 00:07 index.html
...

然后我们再执行下gulp（执行时默认执行default任务，所以前面gulpfile.js中设置任务为default）对比下效果：

$gulp
[00:53:29] Working directory changed to ~/Desktop/hexo/blog
[00:53:30] Using gulpfile ~/Desktop/hexo/blog/gulpfile.js
[00:53:30] Starting 'default'...
[00:53:30] Starting 'uglify'...
[00:53:30] Finished 'uglify' after 23 ms
[00:53:30] Starting 'cssmin'...
[00:53:30] Finished 'cssmin' after 216 ms
[00:53:30] Starting 'jsall'...
[00:53:30] Finished 'jsall' after 56 ms
[00:53:30] Starting 'minify-html'...
[00:53:31] Finished 'minify-html' after 1.16 s
[00:53:31] Finished 'default' after 1.46 s
$ls -lh
...
-rw-r--r--   1 zhengk  staff    27K 12 30 00:07 hello-world.html
...

可以发现足足小了30k，压缩了近一半大小。