# 引言

查看 Hexo 生成的博客文件往往会发现其中存在大量的空格与空行,这虽然不影响页面显示,但是无形中会增加页面文件的大小

实际上不止空白,这些由 Hexo 生成的文件中还有很多能够被优化以减小大小的地方,而要提高网站访问速度,减小资源文件的大小一直是最有效的手段之一 (尤其是图片压缩)。

gulp 是一个自动化构建工具,一般用于开发过程中执行一些常见任务,它有很多社区提供的强大插件可供使用,极大的简化了任务处理流程。在这里我们用它来对 Hexo 生成的博客文件进行压缩优化处理。

# gulp 工作流构建

# 环境

本地环境如下

hexo: 6.2.0
hexo-cli: 4.3.0
os: darwin 21.5.0 12.4
node: 18.0.0
v8: 10.1.124.8-node.13
uv: 1.44.1
zlib: 1.2.11
brotli: 1.0.9
ares: 1.18.1
unicode: 14.0

# 插件安装

主要从 js/css/image/html 几个方面进行压缩

npm install gulp-cli --global
npm install gulp --save
npm install gulp-uglify-es --save
npm install gulp-clean-css --save
npm install gulp-imagemin --save
npm install gulp-html-minifier-terser --save

# 任务脚本编写

在博客工作目录下新建文件 gulpfile.js , 写入如下 gulp 任务配置代码 (详细描述见注释)

const gulp = require('gulp');
const cleancss = require('gulp-clean-css');
const uglify = require('gulp-uglify-es').default;
const htmlmin = require('gulp-html-minifier-terser');
const htmlclean = require('gulp-htmlclean');
const imagemin = require('gulp-imagemin')
// 压缩 public 目录下的 css 文件
// 可接受参数的文档: https://github.com/jakubpawlowicz/clean-css#constructor-options
// 工作目录 src 排除一些目录: https://stackoverflow.com/questions/23384239/excluding-files-directories-from-gulp-task
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css', '!./public/resource/**/*.css'])
        // 处理 public 目录下所有的 css 文件,下同
        .pipe(cleancss({ compatibility: 'ie8' }))
        // 兼容到 IE8
        .pipe(gulp.dest('./public'));
});
// 压缩 public 目录下的 js 文件
gulp.task('minify-js', () => {
    return gulp.src(['./public/**/*.js', '!./public/**/*.min.js', '!./public/resource/**/*.js'])
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', function () {
    return gulp.src(['./public/**/*.*', '!./public/images/**/*.*', '!./public/resource/**/*.*'])
        .pipe(imagemin(
            [imagemin.gifsicle({ optimizationLevel: 3, interlaced: true }),
            imagemin.mozjpeg({ quality: 75, progressive: true }),
            imagemin.optipng({ optimizationLevel: 5 }),
            imagemin.svgo()],
            { 'verbose': true }))
        .pipe(gulp.dest('./public'))
});
// 压缩 public 目录下的 html 文件
// 可接受参数的文档: https://github.com/terser/html-minifier-terser#options-quick-reference
gulp.task('minify-html', () => {
    return gulp.src(['./public/**/*.html', '!./public/resource/**/*.html'])
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,                 // 移除注释
            removeEmptyAttributes: true,          // 移除值为空的参数
            removeRedundantAttributes: true,      // 移除值跟默认值匹配的属性
            collapseBooleanAttributes: true,      // 省略布尔属性的值
            collapseWhitespace: true,             // 移除空格和空行
            minifyCSS: true,                      // 压缩 HTML 中的 CSS
            minifyJS: true,                       // 压缩 HTML 中的 JS
            minifyURLs: true                      // 压缩 HTML 中的链接
        }))
        .pipe(gulp.dest('./public'))
});
// 默认任务,不带任务名运行 gulp 时执行的任务
gulp.task('default', gulp.parallel(
    'minify-css', 'minify-js', 'minify-images', 'minify-html'
), function () {
    console.log("----------gulp Finished----------");
});

# 结语

最后在 hexo 三连额外插入 gulp 命令即可,我愿称之为 [新推送四连]{.blue} hexo clean && hexo generate && gulp && hexo deploy

更新于 阅读次数