Browsersync 浏览器同步

忍不住推荐一下 Browsersync。对项目所做的修改，在页面上的操作都会实时的在所有的浏览器上同步。您在设计与开发的时候，可能会在多个浏览器上打开项目，查看变化，用了 Browsersync，不需要单独手工去刷新页面，在页面上的滚动，点击，在文本框里输入的内容，这些都可以在所有的浏览器上同步。

Browsersync 提供了 Web 界面，可以很方便的去配置，它还可以跟 Gulp 或 Grunt 结合在一起使用，你可以为项目创建可以自动执行的任务。它会为你的项目生成一个服务器，在浏览器上可以直接预览你的项目。它还可以作为代理服务器，比如可以代理你的运行 PHP 的服务器，这样你就可以在自己的 PHP 项目上使用 Browsersync 提供的浏览器同步功能了。你也可以为项目创建一个可以在互联网上直接访问的地址，也就是你可以让别人通过互联网直接访问你在本地创建的项目。

Browersync 入选了 .net 杂志，2015 最佳开源项目，Google 在自己的 Web Starter Kit 里面也用到了 Browsersync 。我们录了关于 Browsersync 的课程，您只需要花 18 分钟就可以学会这个小工具。

安装

下面的命令是安装 browser-sync 这个命令行工具，您要先确定自己的电脑上已经安装好了 npm 这个包管理工具，一般你安装了 Node.js 以后，会自带这个 npm 工具。

npm install -g browser-sync

使用

为项目创建一个目录，进入到这个目录里面，可以先用 git 下载一个静态的测试用的网页：

git clone https://github.com/ninghao/forest

然后执行：

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

上面的命令会启动一个 Browsersync 服务器，服务器的根目录是 forest 这个目录，用了一个 --files 选项，去监视了一些文件的变化，这些文件发生变化以后，会在浏览器上同步这些变化。