对Hexo博客静态资源进行压缩

前言

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

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

找解决方案

首先百度找下相关资料，嗯，比较流行的就两方法，一种是使用 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.json 的 devDependencies 字段中，好处就是能够保证你安装的版本和我的一样，可以避免因为版本的原因而出现问题

"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 不通用
• 2. 图片压缩速度很慢，若不需要压缩图片，请将第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

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

压缩效果

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