前言

之前一直使用的是hexo-browsersync用来同步刷新文章，但是当文章字数达到一定程度，自动刷新就会失效，并且样式也会丢失，这样用起来真的很不爽！之前一直以为是编译markdown时出现的问题，后来发现并不是——把hexo-browsersync卸载之后手动刷新不会出现这个问题。然后就动了自己安装browser-sync来同步的心思。

步骤

1. 首先安装browser-sync：

   npm install browser-sync --save-dev
   

   这里推荐本地安装，运行时与全局安装的命令不同：

   ./node_modules/.bin/browser-sync xxx
   

2. 文档里面有很多命令行可以使用，这里推荐使用配置文件来运行，这样配置文件可以通过git多端使用：

   ./node_modules/.bin/browser-sync init
   

   运行之后会在项目根目录下生成一个bs-config.js文件。

3. 通过修改bs-config.js文件可以配置个性化的需求：

   "files": "source",  // 监听source文件夹中所有文件的更改
   "proxy": "http://localhost:4000/"  // 代理本地4000端口的服务
   ...
   

   注意：files不能为false（默认为false），files如果没值的话也不能同步刷新！

4. 运行browser-sync：

   ./node_modules/.bin/browser-sync --config bs-config.js
   

这样整个项目就在browser-sync的监听下了。

美中不足

要想达到理想中的效果，需要使用两个终端，启动两个不同的服务，这样做是浪费时间的，要做到最完美的效果当然是npm run xxx一键启动是最好的了。

两个服务同时启动

这么简（niu）单（bi）的需求，当然是有牛人造好轮子了，npm上有个concurrently包，就是干这个事的：

npm install concurrently --save-dev

然后修改package.json中的script：

"server": "cross-env NODE_ENV=development hexo server",
"bs": "./node_modules/.bin/browser-sync start -c bs-config.js",
"watch": "concurrently \"npm run server\" \"npm run bs\""

接下来只要使用npm run watch就可以达到hexo-browsersync同样的效果了。

有个bug

可以看到我文章里面的proxy是4000端口的，但是通过bs同步，就变成了3000端口，并且http:也不见了，这应该是个与包本身启动的服务相关的bug。