我的博客主要是采用jekyll作为后台进行markdown文法的文章渲染,但是我在使用过程中发现主要有两种使用场景:
- 对博客主题进行修改 – 往往需要调节
css和js等跟博客文章无关的东西, 需要一个可以即时预览的功能
- 纯粹写文章, 不想被其他因素打扰, 不涉及美化工作, 文法基本已经记住,不需要实时预览,但是需要刷新页面就能看效果
实时预览功能
这个实时预览功能, 最直接的就是修改文章样式后, 浏览器(可能还有我的手机平板)上的网页内容需要跟着刷新.而且同时
我的博客中样式的编写都是scss的,所以需要有个实时的编译器,观察到我的样式改变后,立刻生成对应的css文件,并且通知
jekyll服务刷新头文件,最后通知浏览器刷新页面.
前端自动化
考虑到博客也算是一个弱化的前端工程,尝试过compass、
kola,觉得限制实在太多,
所以干脆从头开始使用纯前端自动化工具gulp管理博客.
一些经验
gulp这个东西给我的感觉有点像unix的味道, 不过不管她多么好用,依然离不开nodejs,
npm,我这里就不赘述. 以下是我的一些gulp任务书写经验
gulpfile.js其实可以是一个文件夹, gulp的运行非常聪明, 她可以以文件夹下的index.js作为入口文件- 整个工程中,只有
gulp的脚本是属于nodejs, 所以.jshintrc文件建议在gulpfile.js单独弄一个
- 使用
require-dir插件可以遍历一个文件夹下所有的javascript文件,懒人必备
config.json作为配置文件的方式太low了, 一律使用config.js+ module.exports的方式替代,美真的不是一点点
Sass的编译
talk’s cheap, show u the code.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
gulp.task('css', () => {
gulp.src(config.src.scss + '/**/*.?(s)css')
.pipe($.sass())
.on('error', (err) => {
$.util.log(err);
})
.pipe($.concat('style.css'))
.pipe(gulp.dest(config.src.css));
});
gulp.task('watch:css', () => {
gulp.watch(config.src.scss + '**/*.?(s)css', ['css']);
});
|
Jekyll编译服务
因为jekyll是使用ruby语言开发的一个小的服务器,所以需要使用nodejs提供的chind.spawn的方式来多进程运行:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
gulp.task('jekyll', () => {
var jekyll_exe = process.platform === "win32" ? "jekyll.bat" : "jekyll";
var jekyll = child.spawn(jekyll_exe, ['build',
'--incremental',
'--watch'
]);
var jekyllLogger = (buffer) => {
buffer.toString()
.split(/\n/)
.forEach((message) => $.util.log('Jekyll: ' + message));
};
jekyll.stdout.on('data', jekyllLogger);
jekyll.stderr.on('data', jekyllLogger);
});
|
同步刷新浏览器
这里要介绍下一个很好玩的插件browserSync, 我的理解是她代理了一部分的http服务,
所以访问网站的同时,其实是她在页面的投入加入了一些东西, 所以她可以远程触发浏览器重新请求网页, 配置如下:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
| var browserSync = require('browser-sync').create();
gulp.task('server', ['css'], () => {
$.util.log(config.site);
browserSync.init({
files: [config.site.root + '/**'],
port: 3131,
server: {
baseDir: config.site.root
}
});
});
|
汇总gulp任务
到这里, 基本上稍微串一串几个任务就可以实现第一个需求了: gulp.task('start', ['jekyll','server', 'watch']);
纯粹写代码
由于我之前博客是使用gulp来进行管理, 这种方式肯定是希望控制台回显更多的错误日志才好,但是如果是平时的使用,我更希望专注于内容的协作, 所以我使用bash改写了启动脚本:
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
| #!/usr/bin/env bash
usage()
{
printf "
Usage
start [options]
Options
[-k|--kill] 杀死jekyll进程
[-j|--jekyll] 启动jekyll进程
[-h|--help] 显示帮助
[-g|--gulp] gulp的方式运行
"
}
kill_jekyll_service(){
ps -ef | grep jekyll | grep -v grep | awk '{print $2}' | xargs kill -9
}
start_jekyll_service(){
jekyll server >output.log 2>&1 &
}
gulp_start(){
gulp start
}
while true; do
case "$1" in
(-k|--kill)
kill_jekyll_service
exit 0
;;
(-j|--jekyll)
kill_jekyll_service
start_jekyll_service
exit 0
;;
(-h|--help)
usage
exit 0
;;
(-g|--gulp)
gulp_start
exit 0
;;
(*)
usage
exit 1
;;
esac
done
|
转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 jaytp@qq.com
