Hexo页面自动刷新与移动端调试

前言

经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面，那一定能提高不少效率，Browsersync 就是这样一款浏览器同步测试工具。

自动刷新

安装 Browsersync

• Browsersync 依赖包较多，Mac 和 Linux 中建议加上 sudo 避免安装时因权限不足而报错

npm install -g browser-sync

• 安装结束后执行下面命令，能显示对应版本则表示安装成功

browser-sync --version

如果显示无此命令，请尝试使用 淘宝 NPM 镜像，或者全局科学上网后再安装

安装 Hexo 端插件

• 要把 Browsersync 应用到 Hexo 上，还需要安装一个小插件 hexo-browsersync 。命令行中进入 Hexo 根目录，执行以下命令:

npm install hexo-browsersync --save

• 安装后像往常一样执行 hexo s 开启本地服务器，当相关文件被修改或者保存时，关联的浏览器页面会自带刷新

一些不足

• 变动后将重新加载整个页面，不能局部刷新；
• 使用 Hexo 自带服务器时，无法在移动端调试；
• 偶尔会报错，需要多保存几次；

移动端调试

如果只是为了自动刷新页面，或许使用 LiveReload 就够了。Browsersync 真正强大之处在于其多设备调试功能，局域网设备访问同一网址，页面同步变动。

生成静态文件

• 要在移动端调试，需要先生成 Hexo 站点的静态文件

hexo g

开启服务

• 命令行进入静态文件所在的文件夹，默认为 Hexo 根目录下的 public，然后执行以下命令：

browser-sync start --server --files "css/*.css, *.html"

• 输入完毕按回车，会自动打开网站首页
• 更多命令行用法请参考 官方文档

局域网访问

• 回到命令行窗口，External 那行的 IP 地址就是局域网地址，打开你的手机平板访问即可，各种操作和文件修改都会同步变动，调试极为便利

此种方式不是直接修改主题源文件，所以平时一般使用 Hexo 本地服务修改样式，有需要时再生成静态文件在移动端测试页面效果

相关链接

1. Browsersync: http://www.browsersync.cn/
2. hexo-browsersync: https://github.com/hexojs/hexo-browsersync
3. 淘宝 NPM 镜像: http://npm.taobao.org/