使用Gulp压缩Hexo-优化提速

最近朋友反应博客速度太太太太……太慢了,然后做优化吧,最先想到的是CDN加速,但是需要对域名进行备案,然而备案需要有一台服务器生成授权码,还是先进行一些小修小补吧,网上最常见的现在是使用gulp对js, css, html, img进行压缩

前期准备-安装依赖包

1
2
3
4
5
6
7
8
#安装gulp
npm install gulp -g

#安装功能模块
npm install gulp-htmlclean gulp-htmlmin gulp-minify-css gulp-uglify gulp-imagemin --save

# 查看gulp版本的方式 `注意:网上有的是使用gulp3(3.9.1),部分代码在gulp4或更高版本可能不适用
gulp -v

编写gulpfile.js文件

在博客的根目录下新建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
var gulp = require('gulp');
var minifycss = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var htmlmin = require('gulp-htmlmin');
var htmlclean = require('gulp-htmlclean');
var imagemin = require('gulp-imagemin');

// 压缩html
gulp.task('minify-html', function() {
return gulp.src('./public/**/*.html')
.pipe(htmlclean())
.pipe(htmlmin({
removeComments: true, //清除HTML注释
minifyJS: true, //压缩页面JS
minifyCSS: true, //压缩页面CSS
minifyURLs: true,
}))
.pipe(gulp.dest('./public'))
});
// 压缩css
gulp.task('minify-css', function() {
return gulp.src('./public/**/*.css')
.pipe(minifycss({
compatibility: 'ie8'
}))
.pipe(gulp.dest('./public'));
});
// 压缩js
gulp.task('minify-js', function() {
return gulp.src('./public/js/**/*.js')
.pipe(uglify())
.pipe(gulp.dest('./public'));
});
// 压缩图片
gulp.task('minify-images', 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'))
});

gulp.task('minify-img', function() {
return gulp.src('./public/img/**/*.*') // 1. 找到图片
.pipe(imagemin( // 2. 压缩图片
[imagemin.gifsicle({'optimizationLevel': 3}),
imagemin.jpegtran({'progressive': true}),
imagemin.optipng({'optimizationLevel': 7}),
imagemin.svgo()],
{'verbose': true}))
.pipe(gulp.dest('./public/img')) // 3. 另存图片
});

// 执行 gulp 命令时执行的任务
gulp.task('default', gulp.parallel(
'minify-html','minify-css','minify-js','minify-images', 'minify-img'
));

还有一些参数可以参考栾铸显的博客

运行查看结果

  • 执行hexo g生成public文件夹下的一些html等文件
  • 执行gulp进行压缩
  • 执行hexo d推送到github

注意事项

  • 有些html里边有一些不和规则的符号比如裸露的<>等,会被解析成HTML里边的标签,然后报错
  • img压缩,依赖包要安装好,不然会有一些莫名其妙的bug

文章作者:Jiadai Sun

最后更新:2019年11月21日 00:11:11

原始链接:https://sunjiadai.xyz/2019/10/08/hexo博客压缩优化提速/

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 3.0 许可协议,转载请注明出处!


-----------本文结束-----------
0%