压缩hexo博客的html、css、js等资源

发表于 2017-04-29 更新于 2021-12-02 分类于随笔阅读次数： Disqus：本文字数： 711 阅读时长 ≈ 3 分钟

这两天又发现一个问题，就是hexo的html、css、js都是没有压缩过的，这样是很不好的，因为会浪费服务器的资源 & 让用户的下载速度变慢。

于是继续使用Google大法搜索有没有解决方案，然后看到了前辈已经遇到过这种问题了，原文链接放在了最后，这里整理一下过程。

为什么我们需要压缩

通过压缩可以明显的减少静态资源的体积，加快响应速度。

使用gulp

我们使用了 gulp 来定义要执行的压缩任务，而执行真正压缩的是如下几个模块，见名知意：

clean-css
htmlclean
htmlmin
imagemin
uglify-js

每个模块，都有对应的 gulp wrapper 模块。

我们需要先在package.json文件里的dependencies里面增加以下的内容：

"del": "^2.2.2",
"gulp": "^3.9.1",
"gulp-clean-css": "^2.3.2",     # 压缩css
"gulp-htmlclean": "^2.7.8",     # 处理html
"gulp-htmlmin": "^3.0.0",       # 压缩html
"gulp-imagemin": "^3.1.1",      # 压缩图片
"gulp-uglify": "^2.0.1",        # 处理js
"run-sequence": "^1.2.2"        # 控制任务执行顺序

然后我们需要安装一下模块：

1	npm install

然后我们需要写一下我们的gulpfile.js：

var gulp = require('gulp');
var minifycss = require('gulp-clean-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');
var del = require('del');
var runSequence = require('run-sequence');
var Hexo = require('hexo');
// 清除public文件夹
gulp.task('clean', function() {
    return del(['public/**/*']);
});
// 利用Hexo API 来生成博客内容， 效果和在命令行运行： hexo g 一样
// generate html with 'hexo generate'
var hexo = new Hexo(process.cwd(), {});
gulp.task('generate', function(cb) {
    hexo.init().then(function() {
        return hexo.call('generate', {
            watch: false
        });
    }).then(function() {
        return hexo.exit();
    }).then(function() {
        return cb()
    }).catch(function(err) {
        console.log(err);
        hexo.exit(err);
        return cb(err);
    })
})
// 压缩public目录下的所有css
gulp.task('minify-css', function() {
    return gulp.src('./public/**/*.css')
        .pipe(minifycss({
            compatibility: 'ie8'
        }))
        .pipe(gulp.dest('./public'));
});
// 压缩public目录下的所有html
gulp.task('minify-html', function() {
    return gulp.src('./public/**/*.html')
        .pipe(htmlclean())
        .pipe(htmlmin({
            removeComments: true,
            minifyJS: true,
            minifyCSS: true,
            minifyURLs: true,
        }))
        .pipe(gulp.dest('./public'))
});
// 压缩public目录下的所有js
gulp.task('minify-js', function() {
    return gulp.src('./public/**/*.js')
        .pipe(uglify())
        .pipe(gulp.dest('./public'));
});
// 压缩public目录下的所有img： 这个采用默认配置
gulp.task('minify-img', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin())
        .pipe(gulp.dest('./public/images'))
})
// 同上，压缩图片，这里采用了： 最大化压缩效果。
gulp.task('minify-img-aggressive', function() {
    return gulp.src('./public/images/**/*.*')
        .pipe(imagemin(
        [imagemin.gifsicle({'optimizationLevel': 3}), 
        imagemin.jpegtran({'progressive': true}), 
        imagemin.optipng({'optimizationLevel': 7}), 
        imagemin.svgo()],
        {'verbose': true}))
        .pipe(gulp.dest('./public/images'))
})
// 用run-sequence并发执行，同时处理html，css，js，img
gulp.task('compress', function(cb) {
    runSequence(['minify-html', 'minify-css', 'minify-js', 'minify-img-aggressive'], cb);
});
// 执行顺序： 清除public目录 -> 产生原始博客内容 -> 执行压缩混淆
gulp.task('build', function(cb) {
    runSequence('clean', 'generate', 'compress', cb)
});
gulp.task('default', ['build'])