使用Gulp压缩Hexo静态文件

Hexo生成的静态站点默认没有做太多资源压缩优化，为了进一步优化访问速度，可以在Hexo生成public目录后，引入Gulp进行二次压缩处理

安装依赖

在Hexo项目根目录执行

npm install gulp gulp-htmlmin gulp-clean-css gulp-uglify gulp-htmlclean

创建gulpfile.js

在Hexo根目录新建gulpfile.js，并写入以下内容：

const gulp = require('gulp');
const htmlmin = require('gulp-htmlmin');
const cleanCSS = require('gulp-clean-css');
const uglify = require('gulp-uglify');
const htmlclean = require('gulp-htmlclean');

// 压缩HTML
gulp.task('minify-html', () => {
  return gulp.src('./public/**/*.html')
    .pipe(htmlclean())
    .pipe(htmlmin({
      collapseWhitespace: true,
      removeComments: true,
      minifyJS: true,
      minifyCSS: true
    }))
    .pipe(gulp.dest('./public'));
});

// 压缩CSS
gulp.task('minify-css', () => {
  return gulp.src('./public/**/*.css')
    .pipe(cleanCSS())
    .pipe(gulp.dest('./public'));
});

// 压缩JS
gulp.task('minify-js', () => {
  return gulp.src('./public/**/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./public'));
});

// 默认任务
gulp.task('default', gulp.series(
  'minify-html',
  'minify-css',
  'minify-js'
));

构建流程

手动执行

hexo clean && hexo generate && gulp

写入package.json

"scripts": {
    "build": "hexo generate && gulp",
    "clean": "hexo clean",
    "deploy": "hexo deploy",
    "server": "hexo server"
  }

任选其中一个你喜欢的方式进行使用即可