❗️你有0条未读消息

使用gulp精简hexo博客代码

背景

Next主题在Hexo引擎解析md时生成的代码会包含大量的无用空白,见下图.

这对有完美主义倾向的我们来说是个很折磨的体验,并且多余的空白也会增加文档的大小,使得网站在响应上不够迅速,影响体验.
上一篇博文提到了使用gulp压缩前端代码,本篇博文趁热打铁,就gulp在Hexo博客优化上进行一番实践.

优化实践

1. 博客根目录下创建gulpfile.js文件
2. 安装gulp以及依赖插件并保存到项目依赖
1
npm install -d --save gulp gulp-clean gulp-load-plugins gulp-minify-css gulp-minify-html gulp-rename gulp-uglify gulp-shell
3. 编写gulp优化任务

hexo编译后生成的代码文件都在public目录下,因此我们的待优化源文件都在该目录下.并且所有的子目录下的文件也都要被优化,并且开源的库文件比如jquery等一般已经是优化压缩过的,不需要再压缩,因此需要将带有.min后缀的文件排除.于是待优化源文件的路径就可以确定了.
优化过的文件统一输出到项目根目录下的dst目录下.

3.1 清理任务
1
2
3
4
gulp.task("clean",function() {
return gulp.src("./dst/*")
.pipe(plugins.clean()); //plugins为加载的gulp-load-plugins插件,它可以自动加载项目依赖(package.json定义)
});

以上任务清空dst目录

3.2 压缩css
1
2
3
4
5
gulp.task("css",function() {
return gulp.src(["public/**/*.css","!public/**/*.min.css"])
.pipe(plugins.minifyCss({compatibility: "ie8"}))
.pipe(gulp.dest("./dst/"));
});

以上任务以原目录结构输出到dst目录,保持原有文件名不变

3.3 压缩js
1
2
3
4
5
gulp.task("js",function() {
return gulp.src(["public/**/*.js","!public/**/*.min.js"])
.pipe(plugins.uglify())
.pipe(gulp.dest("./dst/"));
});
3.4 压缩html
1
2
3
4
5
gulp.task("html",function() {
return gulp.src("public/**/*.html")
.pipe(plugins.minifyHtml())
.pipe(gulp.dest("./dst/");
});

以上三个任务基本上就将博客的所有静态文件都优化压缩过了,当然如果博客内还有本地图片的话,还可以对图片进行压缩.
为了更加方便的进行代码的优化压缩,有必要定义默认任务以及文件监听.

3.5 默认任务
1
2
3
gulp.task("default",["css","js","html"],function() {
console.log("gulp task finished!");
});

以上默认任务依赖前述定义的所有任务,在依次执行完所有任务后仅输出任务完成提示.

3.6 文件监听

每次手动执行还是不够高效,我们再来定义一个监听任务,让Hexo每次编译之后自动进行优化.

1
2
3
gulp.task("watch",function() {
gulp.watch("public/*",["default"]);
});

上述监听任务可以使用nohup gulp watch运行在后台,一旦public目录有变动就会自动运行default任务,即整个博客的优化任务.

3.7 代码替换

优化以后的代码存在在dst目录下,我们还需要将他们移回到public目录下才可以生效.由于没找到原地优化的方法,因此只能先存在到别的地方再移回去,如果你有更好的方法,欢迎分享.

1
2
3
4
5
6
gulp.task("mv",function() {
return gulp.src("./dst/*")
.pipe(plugins.shell([
"cp -r ./dst/* ./public/"
]));
});

3.8 额外的说明

需要说明的是,由于mv任务会将优化后的文件移回public目录,如果运行了watch任务,可能会造成循环任务.我没有开启后台监听任务,我是在外包shell脚本中运行gulp任务并提交代码.
另外,clean任务,mv任务和其他任务之间是有顺序依赖的,clean任务需要最先执行,mv任务最后执行,如果写在一个任务中(如作为default任务的依赖),可能会由于异步执行的原因导致一些不可预期的结果.

3.9 优化效果

我的博客目前所有静态文件均经过了优化压缩,可以通过右键查看源码.

3.14日更新

针对上述3.8节额外说明第二点任务依赖的问题,随着近期gulp实践中的进一步了解,有了更好的解决方式,将此种情形下的”半自动化”提升到”全自动化”方式。免去了需要人为先执行一遍clean任务的步骤。

可以通过gulp的stream来解决任务依赖。亦即使gulp变成串行运行任务。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
gulp.task("clean",function(){
...
});

gulp.task("js",["clean"],function(){
var stream = gulp.src(...) //执行操作
.pipe(...)
.pipe(...);
return stream; //返回stream表示任务已经完成
});

gulp.task("css",["clean"],function(){
var stream = gulp.src(...)
.pipe(...);
return stream;
});

gulp.task("defaul",["css","js"]); //虽然clean任务作为依赖被调用了两次但并不会被执行两次,
//css和js任务将异步执行,clean任务作为依赖将在执行完以后再执行主体任务

赞 赏

如果你觉得本文还不错的话也可以赞赏一点~


推荐书目:
JavaScript框架设计

评论
0条评论
还没有评论,大侠坐个沙发?