Hexo使用gulp压缩博客Html+CSS+JS静态资源

Gulp作为前端工作流的自动化工具，能够高效处理各类静态资源压缩任务。通过其丰富的插件生态系统，开发者可以实现：
CSS文件的极致压缩
JavaScript代码的智能优化
HTML文档的轻量化处理
字体文件的按需提取
注意：虽然Gulp支持图片压缩，但相比专业的图片优化工具如imagine、tinypng等，其压缩效果有限（通常仅能减少几十KB），因此本文不包含图片压缩相关内容。

环境准备：Gulp安装与配置

基础安装步骤

全局安装Gulp命令行工具：

1	npm install --global gulp-cli #全局安装gulp指令集

项目本地安装Gulp：
1
npm install gulp --save
安装各个下属插件以实现对各类静态资源的压缩

各类资源压缩方案详解

HTML压缩方案

推荐插件组合：

1
2
3

npm install gulp-htmlclean --save-dev
npm install gulp-html-minifier-terser --save-dev
# 用gulp-html-minifier-terser可以压缩HTML中的ES6语法

优势：

完整保留ES6语法
支持高级HTML优化选项
移除注释和空白字符

CSS压缩方案

安装插件：

1	npm install gulp-clean-css --save-dev

特性：

自动兼容IE11等老旧浏览器
智能合并相同规则
移除无用CSS代码

JavaScript压缩方案（两种推荐）

方案一：Babel转译方案（兼容旧浏览器）

1 2	npm install gulp-uglify --save-dev npm install gulp-babel @babel/core @babel/preset-env --save-dev

适用场景：

需要支持IE等老旧浏览器
必须将ES6+代码转换为ES5

潜在问题：

变量生命周期变化可能导致bug
需要手动排除某些文件

方案二：Terser方案（推荐）

1	npm install gulp-terser --save-dev

优势：

保留原始ES6+语法
无变量作用域问题
与JsDelivr CDN的.min.js机制一致

字体文件优化方案

安装插件：

1	npm install gulp-fontmin --save-dev

注意事项：

仅支持TTF格式字体
根据实际使用字符提取子集
可减少字体文件90%以上体积

完整Gulp任务配置

为Gulp创建gulpfile.js任务脚本。在博客根目录[Blogroot]下新建gulpfile.js,打开[Blogroot]\gulpfile.js,输入以下内容：

//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
var uglify = require('gulp-uglify')
var babel = require('gulp-babel')
//压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(babel({
      presets: ['@babel/preset-env']
    }))
    .pipe(uglify().on('error', function (e) {
      console.log(e)
    }))
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))

//用到的各个插件
var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var htmlmin = require('gulp-html-minifier-terser');
var htmlclean = require('gulp-htmlclean');
var fontmin = require('gulp-fontmin');
// gulp-tester
var terser = require('gulp-terser');
// 压缩js
gulp.task('compress', async() =>{
  gulp.src(['./public/**/*.js', '!./public/**/*.min.js'])
    .pipe(terser())
    .pipe(gulp.dest('./public'))
});
//压缩css
gulp.task('minify-css', () => {
    return gulp.src(['./public/**/*.css'])
        .pipe(cleanCSS({
            compatibility: 'ie11'
        }))
        .pipe(gulp.dest('./public'));
});
//压缩html
gulp.task('minify-html', () => {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true, //清除html注释
            collapseWhitespace: true, //压缩html
            collapseBooleanAttributes: true,
            //省略布尔属性的值，例如：<input checked="true"/> ==> <input />
            removeEmptyAttributes: true,
            //删除所有空格作属性值，例如：<input id="" /> ==> <input />
            removeScriptTypeAttributes: true,
            //删除<script>的type="text/javascript"
            removeStyleLinkTypeAttributes: true,
            //删除<style>和<link>的 type="text/css"
            minifyJS: true, //压缩页面 JS
            minifyCSS: true, //压缩页面 CSS
            minifyURLs: true  //压缩页面URL
        }))
        .pipe(gulp.dest('./public'))
});
//压缩字体
function minifyFont(text, cb) {
  gulp
    .src('./public/fonts/*.ttf') //原字体所在目录
    .pipe(fontmin({
      text: text
    }))
    .pipe(gulp.dest('./public/fontsdest/')) //压缩后的输出目录
    .on('end', cb);
}

gulp.task('mini-font', (cb) => {
  var buffers = [];
  gulp
    .src(['./public/**/*.html']) //HTML文件所在目录请根据自身情况修改
    .on('data', function(file) {
      buffers.push(file.contents);
    })
    .on('end', function() {
      var text = Buffer.concat(buffers).toString('utf-8');
      minifyFont(text, cb);
    });
});
// 运行gulp命令时依次执行以下任务
gulp.task('default', gulp.parallel(
  'compress', 'minify-css', 'minify-html','mini-font'
))

在每次运行完hexo generate生成静态页面后，运行gulp对其进行压缩。指令流程如下：

hexo clean
hexo generate
gulp
hexo server 或 hexo deploy

常见问题解决方案

JavaScript压缩异常处理

若某些JS文件压缩后出现变量未定义错误：

排除特定文件：

gulp.src([
  './public/**/*.js',
  '!./public/**/*.min.js',
  '!./public/js/example.js' // 排除问题文件
])

推荐方案：优先使用Terser而非Babel方案

字体压缩注意事项

压缩后的字体输出路径为/fontsdest/
开发环境需先运行gulp才能看到字体效果
生产环境记得更新CSS中的字体引用路径

结语

通过合理配置Gulp工作流，您可以显著提升网站性能。建议：

优先使用Terser处理JavaScript
开发阶段可以先跳过字体压缩
定期检查压缩后文件的兼容性

参考原文：

引用站外地址，不保证站点的可用性和安全性

使用gulp压缩博客静态资源

Akilarの糖果屋