title: Hexo 页面自动刷新与移动端调试
date: 2016-03-27 00:17:50
categories:
- 术业专攻
tags:
- Hexo
- Browsersync
toc:
permalink: hexo-browsersync
---

<h2 id="intro">前言</h2>经常本地调试 Hexo 主题, 如果有工具能监视文件更改幷自动刷新页面，那一定能提高不少效率，[Browsersync](http://www.browsersync.cn/) 就是这样一款浏览器同步测试工具。

<!-- more -->
![browser-sync](/resources/browsersync.gif)

## 自动刷新

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

``` bash
npm install -g browser-sync
```

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

``` bash
browser-sync --version
```

> 如果显示无此命令，请尝试使用 [淘宝 NPM 镜像](http://npm.taobao.org/)，或者全局科学上网后再安装

### 安装 Hexo 端插件

- 要把 Browsersync 应用到 Hexo 上，还需要安装一个小插件 [hexo-browsersync](https://github.com/hexojs/hexo-browsersync) 。命令行中进入 Hexo 根目录，执行以下命令:

``` bash
npm install hexo-browsersync --save
```

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

### 一些不足

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

## 移动端调试

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

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

``` bash
hexo g
```

### 开启服务
- 命令行进入静态文件所在的文件夹，默认为 Hexo 根目录下的 `public`，然后执行以下命令：

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

- 输入完毕按回车，会自动打开网站首页
- 更多命令行用法请参考 [官方文档](http://www.browsersync.cn/docs/command-line/)

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

![browsersync-2](/resources/browsersync-2.gif)

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

## 相关链接

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