进入到项目所在的目录，我们可以先去下载一个简单的网页 .. 在宁皓网的 github 仓库里，有一个叫 forest 的仓库 .. 可以把它克隆到项目下面 ..

这个 forest 目录就是静态网页所在的目录 ... 再用编辑器打开项目 ...

回到终端，下面我们去启动一个 Browsersync 的服务器，然后让它去监视项目里的一些文件的变化 .. 这些文件发生变化，就把这些变化同步到所有打开这个项目的浏览器上 .. browser-sync start 用一个 --server，表示要启动一个服务器 ..

在它后面再指定一下服务器的根目录，这里就是 forest 这个目录 .. 不指定的话默认就是当前项目的根目录 ..

后面再用一个 files 选项指定一下要监视的文件 .. 这里要监视的文件就是在 forest 这个目录下面的 index.html ... 还有 css 目录下面的这几个 css 文件 ...

在这组引号里面可以描述一下这些文件 .. 先用一个 forest/index.html ，逗号分隔一下 .. 再用一个 forest/css/*.css，表示在 css 目录下的所有的 css 文件 。

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

回车执行一下 .. 这样会用系统默认的浏览器打开这个项目 .. 再回到终端，这里会给我们显示服务器的地址， local 表示本地，也就是你可以在当前这台电脑上的浏览器里，用 localhost:3000 打开这个项目 ..

另外这里还有一个 External ，表示外部的地址，你可以在其它设备上使用这个地址打开这个项目

.. 注意这个地址是一个内网的地址，也就是只有在这个网络内部的设备才能打开这个项目 ..

这里我在本地电脑上用两个浏览器打开项目的服务器的地址 ... 用的是 localhost:3000 ...

再用一个外部的设备打开这个项目 ... 这里我用的是 iPad mini ... 打开的地址就是 Browsersync 提供的在内网使用的一个地址 ...

先滚动一下在 iPad 上的页面 ... 你会看到在本地电脑上的这两个浏览器上会实时的作出反应 ...

然后在本地的浏览器，再滚动一下页面 ... 这个变化也会同步给所有的浏览器 .. 包括在 iPad 上用内网 IP 打开的项目 .. 点一下这个汉堡包按钮 ... 同样在其它的浏览器上也会打开这个菜单 ..

下面再去测试一下 Browsersync 的文件同步功能 .. 回到编辑器 .. 先打开 index.html .. 修改一下这个文件里的内容 ...

学习 Web 设计与开发 ... 保存 ...

你会看到，所有打开这个项目的浏览器会同步文件的变化 ..

再打开这个样式表 .. 修改一下 logo 的颜色 ... 保存 ... 会实时显示出样式的变化 ...

再改一下大标题的字号 ... 同样也会实时的在所有浏览器上显示这个大标题的新样式 ...