前言
经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面，那一定能提高不少效率，Browsersync 就是这样一款浏览器同步测试工具。
自动刷新
安装 Browsersync
- Browsersync 依赖包较多，Mac 和 Linux 中建议加上
sudo避免安装时因权限不足而报错
1 | npm install -g browser-sync |
- 安装结束后执行下面命令，能显示对应版本则表示安装成功
1 | browser-sync --version |
如果显示无此命令，请尝试使用 淘宝 NPM 镜像，或者全局科学上网后再安装
安装 Hexo 端插件
- 要把 Browsersync 应用到 Hexo 上，还需要安装一个小插件 hexo-browsersync 。命令行中进入 Hexo 根目录，执行以下命令:
1 | npm install hexo-browsersync --save |
- 安装后像往常一样执行
hexo s开启本地服务器，当相关文件被修改或者保存时，关联的浏览器页面会自带刷新
一些不足
- 变动后将重新加载整个页面，不能局部刷新；
- 使用 Hexo 自带服务器时，无法在移动端调试；
- 偶尔会报错，需要多保存几次；
移动端调试
如果只是为了自动刷新页面，或许使用 LiveReload 就够了。Browsersync 真正强大之处在于其多设备调试功能，局域网设备访问同一网址，页面同步变动。
生成静态文件
- 要在移动端调试，需要先生成 Hexo 站点的静态文件
1 | hexo g |
开启服务
- 命令行进入静态文件所在的文件夹，默认为 Hexo 根目录下的
public，然后执行以下命令：
1 | browser-sync start --server --files "css/*.css, *.html" |
- 输入完毕按回车，会自动打开网站首页
- 更多命令行用法请参考 官方文档
局域网访问
- 回到命令行窗口，External 那行的 IP 地址就是局域网地址，打开你的手机平板访问即可，各种操作和文件修改都会同步变动，调试极为便利
此种方式不是直接修改主题源文件，所以平时一般使用 Hexo 本地服务修改样式，有需要时再生成静态文件在移动端测试页面效果
相关链接
- Browsersync: http://www.browsersync.cn/
- hexo-browsersync: https://github.com/hexojs/hexo-browsersync
- 淘宝 NPM 镜像: http://npm.taobao.org/