介绍在 Hexo 中使用 LiveReload 的方法。

之前我在 Ruhoh 上使用 guard-livereload 来实现自动更新预览。这样,一旦我修改了网站中的内容,livereload 会立马检测到并且通知浏览器刷新页面,不需要自己手动按 F5 刷新了。完全符合本人热衷偷懒的口味。

迁移到 Hexo 后,我也希望能够用上这个功能。经过一番搜索,我发现在 node.js 平台要使用 Livereload 也非常容易。

方法一:使用 LiveReload

安装和使用

  1. 首先是先安装 LiveReload 的 node.js 版本:

1
$ npm install -g node-livereload

  1. 安装 livereload 的浏览器插件

  2. 完成后,到你的 Hexo 博客根目录下执行: LiveReload图 1 LiveReload

1
$ livereload -e ".md, .html, .png, .svg, .jpg, .gif, .css, .js, .json"

后面的一长串后缀名是 livereload 要监视的文件格式。一旦带有这类后缀名的文件内容发生变动,livereload 就会检测到,并向浏览器发出信号。

  1. 最后一步是用浏览器预览你正在编辑的页面,并点击 LiveReload 的浏览器插件小图标。

大功告成。现在试试编辑你的 Markdown 源文件,保存一下。浏览器是不是就立即刷新了呢?

进一步偷懒

每次都要敲上面那串命令太繁琐。为了省事,可以把启动 hexo 服务器和 livereload 两条命令写成一个脚本,名为 hexo_run ,放在你的 bin 目录里。

1
2
3
4
5
6
#!/bin/bash
HEXO=<你的Hexo根目录地址>
cd $HEXO
hexo clean # Clean cache
livereload -e ".md, .html, .png, .svg, .jpg, .gif, .css, .js, .json" | hexo server --debug

其中 $HEXO 是一个自定义的变量,用来保存你的 Hexo 根目录地址。

最后别忘了给 hexo_run 添加可执行权限:

1
$ sudo chmod +x hexo_run

方法二:使用 hexo-livereload

新内容 Hexo 的作者也编写了 hexo-livereload ,使用起来更加简单:

安装和使用

  1. 先安装 hexo-liveReload:

1
$ npm install hexo-livereload --save

  1. 安装 livereload 的浏览器插件

之后像往常一样启动 hexo 的预览 hexo server ,这个插件就会自动启动。

配置端口

hexo-livereload 允许直接在 _config.yml 中配置 livereload 的端口,默认为 35729。如果没有遇到端口冲突,通常不必要对端口号进行设置。

1
2
livereload:
port: 35729

两种方法对比

经过我的测试,我发现:

  1. 第一种方案允许设定监测的文件类型,不过响应速度比较慢。问题出在那条 shell 命令:两个进程都是前台作业,可能存在抢夺资源的情况;
  2. 第二种方案比较傻瓜,响应速度也比较快。因此推荐使用第二种方案。
分享到: 更多

Comments