hexo minifier gulp 压缩博客

关键词：hexo-all-minifier gulp 插件

https://summerandwinter.github.io/hexo-minify-two.html
https://ehlxr.me/2016/08/30/使用Hexo基于GitHub-Pages搭建个人博客（三）/

安装后时间变成了UTC，我一不小心用之前的存档覆盖了博客一堆内容，欲哭无泪，但时间问题还没解决

后来再次尝试进行博客压缩，找到gulp，有一位前辈的研究很独特，在此放个链接：

https://blog.inkuang.com/2021/405/

为了防止丢失，我从以上文章中总结了一些内容：

其他教程存在的问题

使用关键词 hexo gulp 在网上搜索，可以搜到一堆类似的教程，但是根据我的实际测试，网上搜到的这些教程大部分都已经过时了，现在再使用的话或多或少的存在一些问题。

这些教程中一般都是通过安装 gulp-minify-css、gulp-uglify、gulp-htmlclean、gulp-htmlmin 这几个插件来处理的。下面按照压缩任务划分，分别说明一下现在还按照这些教程操作的话存在的一些问题。
gulp-minify-css 这个插件已弃用，请使用 gulp-clean-css 。这虽然并不影响我们的正常使用该插件，但是有更好的替代品的话为什么还要用这个已弃用的插件呢？
gulp-uglify 不兼容ES6

上面提到的插件中 gulp-htmlclean 和 gulp-htmlmin 是用来压缩 HTML 代码的。

网上教程的一般做法是先将代码传递给 gulp-htmlclean 清理掉其中的空白，然后再传递给 gulp-htmlmin 来移除注释、压缩 HTML 文件中的 CSS、JS 代码等。然而查看 gulp-htmlmin 所基于的 html-minifier 的文档发现，它有一个 collapseWhitespace 参数，设置为 true 时可以移除 HTML 代码中的空白块，那还多此一举的安装一个 gulp-htmlclean 插件干什么呢？

另外，上面提到了 gulp-htmlmin 可以压缩 HTML 中的 JS 代码，这个功能用的是跟 gulp-uglify 一样的底层库 uglify-js 来实现的，这也就导致它同样的不兼容 ES6 标准。最终会发现 HTML 文件中的内容并没有被全部压缩成“一行”，仍有部分 JS 代码是以未被压缩的形式存在的。

操作方法及任务配置

根据 gulp 及各个插件的文档，我们首先需要全局安装 gulp-cli，然后在博客工作目录下安装需要的插件：

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

安装完成后在博客工作目录下新建文件 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');


// 压缩public目录下的css文件
// 可接受参数的文档：https://github.com/jakubpawlowicz/clean-css#constructor-options
gulp.task('minify-css', () => {
    return gulp.src('./public/**/*.css')           // 处理public目录下所有的css文件，下同
        .pipe(cleancss({ compatibility: 'ie8' }))  // 兼容到IE8
        .pipe(gulp.dest('./public'));
});

// 压缩public目录下的js文件
gulp.task('minify-js', () => {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .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')
        .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-html'
));

保存之后先用 hexo g 生成博客文件，然后执行命令 gulp 就可以对刚刚生成的博客文件（public 目录下的文件）进行压缩优化处理了。

以上文章来自：https://blog.inkuang.com/2021/405/