前言

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

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

博客压缩01.jpg

找解决方案

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

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

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

安装依赖

  • 安装 cnpm

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

执行

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

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

  • 安装gulp相关依赖

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

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

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

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

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

"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 文件,这个名字不可改,必须是这个名字。

在刚创建的文件中写入如下代码:

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' 删除,忽略其它文件压缩同理。

对代码进行压缩

hexo clean
hexo g
gulp build
hexo d

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

对代码进行简化

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

package.json 中加入如下字段:

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

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

npm run hexo

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

压缩效果

博客压缩02.jpg

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