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

这两天又发现一个问题，就是 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"        # 控制任务执行顺序
复制代码

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

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'])
复制代码

之后就可以使用 gulp build 命令进行压缩了，这步会自动执行 clean 和 generate，当然不放心的也可以先执行一下 hexo clean

所以我们最后的部署脚本如下：

hexo clean
gulp build
hexo d
复制代码

Done！

参考出处：www.karlzhou.com/articles/co…