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

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

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

为什么我们需要压缩

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

使用gulp

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

  • clean-css
  • htmlclean
  • htmlmin
  • imagemin
  • uglify-js

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

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

1
2
3
4
5
6
7
8
"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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
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命令进行压缩了,这步会自动执行cleangenerate,当然不放心的也可以先执行一下hexo clean

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

1
2
3
hexo clean
gulp build
hexo d

Done!

参考出处:https://www.karlzhou.com/articles/compress-minify-hexo/

请博主喝杯咖啡~
0%