You are here
宁皓网 Browsersync 浏览器同步 有大用
Browsersync 是一个可以同步浏览器变化的工具，也就是你对项目的修改，不需要手工刷新浏览器，可以直接显示出修改之后的变化。还有你在页面上的操作也会同步，比如滚动页面，点击了按钮，在表单里输入的内容，这些都可以在所有打开了项目的浏览器上进行同步显示。
封面摄影：ErwinBuske
来自 https://ninghao.net/course/2672#info
1)介绍
Browsersync 是一个同步浏览器变化的开源工具 ... 你在测试项目的时候，可能需要在不同设备，或者不同宽度的浏览器上打开项目 ... 然后你要手工去刷新项目的变化 ..
有了 Browsersync 以后，就不需要手工去刷新了 ... 你可以用它为项目创建一个服务器，然后去监视一些文件的变化，这些文件发生了变化，会在所有的打开了这个项目服务器的浏览器上作出显示 ...
Browsersync 还能同步一些行为，比如滚动页面，点击了某个按钮 ... 在文本框里输入的内容，切换复选框等等，这些动作也都会实时的在所有的浏览器上作出响应 ...
来自 https://ninghao.net/video/2673#info
基础
2)安装 Browsersync
先去安装一下 Browsersync 的命令行工具，这里需要用到 NodeJS 的包管理 npm 去安装，你需要先确定自己已经安装好了 NodeJS 还有 npm .. 然后打开终端，输入：
npm install -g browser-sync
完成以后， 我们应该就可以在命令行下面使用 browser-sync 这个命令了，输入：
browser-sync
会返回一些有用的帮助信息，说明已经安装好了这个命令行工具。
如果你想在项目里使用 Browsersync ，还需要在这个项目的内部去安装一下 Browsersync ... 先去给项目创建一个目录 ..
cd ~/desktop
mkdir ninghao-browsersync
进入到这个目录的下面：
cd ninghao-browsersync
再用 npm init 去创建一个 package.json ..
npm init
一路回车 ... 完成以后再去安装一下 browser-sync：
npm install browser-sync --save-dev
后面的 --save-dev 选项可以把 browser-sync 作为开发的依赖放到 package.json 里面。 查看一下 ... 这里会多了一个 node_modules 目录 ... 在这个目录的下面，会有刚才我们安装的 browsersync ...
来自 https://ninghao.net/video/2675#info
3)使用 Browsersync
进入到项目所在的目录，我们可以先去下载一个简单的网页 .. 在宁皓网的 github 仓库里，有一个叫 forest 的仓库 .. 可以把它克隆到项目下面 ..
git clone https://github.com/ninghao/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 的颜色 ... 保存 ... 会实时显示出样式的变化 ...
再改一下大标题的字号 ... 同样也会实时的在所有浏览器上显示这个大标题的新样式 ...
来自 https://ninghao.net/video/2676#info
配置
4)配置界面：预览
Browsersync 提供了一个 Web 界面，可以去配置 Browsersync 的一些行为。在启动 Browsersync 服务器的时候，它会自动生成这个界面的地址 ... 就是这里的 UI .. 在本机上打开这个地址可以使用 localhost:3001 .. 在网络里的其它设备上也可以访问到这个界面 .. 我这里这个地址是 192.168.1.140:3001 ..
下面在浏览器打开这个配置界面 .. localhost:3001 .. 当前显示的是一个预览页面 .. 会显示项目的服务器本机的地址 .. 还有外部的地址 ...
Serving files from ，这里告诉我们哪个目录里的文件可以在服务器上打开 .. ./ 表示当前目录 .. Current Connections ，告诉我们当前都有哪些浏览器打开了项目 ..
最上面有一个工具栏，Reload All 可以重新加载所有浏览器上打开的项目 ... New Tab 就是在新标签上打开这个项目 .. Scroll Top 可以让所有浏览器上的页面都滚动到顶部 .. Reset All 是重置所有的东西，比如清除在表单里输入的东西，重置表单的状态等等。
来自 https://ninghao.net/video/2678#info
5)配置界面：Sync Options
打开 Sync Options ，同步选项这个选项卡 .. 在这里你可以设置一下需要同步的行为 .. Clicks 是点击，Scroll 是滚动 .. Forms:submit 是提交表单，Forms:inputs 就是在文本框或者文本区域里输入内容的动作 ，Forms:toggles 是切换复选框还有单选按钮的动作 .. 如果你不想在所有的浏览器上同步这些动作，可以在这里选择关掉它们 ..
默认都是开启的状态 ... 下面我们可以先去演示一下.. 现在用的是 Chrome 浏览器打开的项目 ... 调整一下页面的宽度 ...
然后再打开 Safari 浏览器，把它放到右边 ...
在一个浏览器上滚动这个页面 .. 你会看到，在所有其它的浏览器上都会同步这个滚动的行为 ... 不需要的话可以在 Sync Options 里关掉 Scroll 选项 ..
再找到页面上的一个表单 ... 在这个文本框里输入点内容 ... Browsersync 会把内容实时的同步到其它的浏览器上 .. 关掉 Forms:inputs 选项可以去掉这个功能。
勾选一下这个复选框 .. 在其它的浏览器上这个复选框都会被勾选上 .. 取消一下 .. 同样会同步这个复选框的状态 ... 如果不想同步可以在同步选项里关掉 Forms:toggles 这个选项 ..
回到页面的顶部 ... 再点一下这个汉堡包按钮 .. 你会看到在其它的浏览器上会同时打开这个下拉菜单 .. 这是默认 Browsersync 可以同步表单的点击的行为 .. 不想用的话，可以关于 Clicks 选项 ..
来自 https://ninghao.net/video/2679
6)配置界面：Debug
再看一下 Remote Debug，在这里你可以启用一些调试的功能， Remote Debugger ，就是 weinre .. 它可以让我们在本机上使用 Chrome 的开发者工具远程调试在其它设备上运行用的应用 .. 比如在你的 iPad 上打开的网页，你可以直接使用这个调试工具去调试 ..
先启用这个工具 .. 再点一下在新标签打开 .. 在 Targets 这里，点击你想要调试的目标 .. 点击我在 iPad 打开的这个目标 .. 链接会变成绿色 .. 现在，在其它选项卡上的东西，就相当于是在调试 iPad 上打开的项目 .. 比如打开 Elements 选项卡 ..
点开要调试的元素 ... 你会看到在 iPad 上会实时显示被选中的元素 ...
这里再选中一个元素 .. 再修改一下元素里的值，完成以后回车执行一下 .. 同样会在 iPad 上看到元素的值的变化 ..
再回到 Browsersync 的界面 .. CSS Outlining ，打开这个选项以后，会在页面上所有的元素的周围显示一个边框 .. 可以方便去调试 CSS .. 注意元素周围的这个边框的颜色是不一样的 ..
再看一下 CSS Depth Outlining .. 它会在所有元素上应用一个阴影的效果，你应该可以通过这个效果判断元素的层级关系 ..
最后这个 Overlay CSS Grid 挺有用 .. 会在页面上覆盖显示一些网格，你可以使用这些小格子作为参考，去对齐元素 .. 这里还有 一些选项，比如改变格子的尺寸 ... 颜色 ... 网格应用的选择器 .. 默认是 body 这个标签，你可以设置成页面上的其它的某些元素，这样就只会在这些元素上覆盖这些小格子 ..
来自 https://ninghao.net/video/2680
选项
7)--tunnel：与所有人同步
默认 Browsersync 会为项目生成一个本地链接，还有一个本地网络的链接，这样同在一个局域网的其它设备可以打开你的项目，并且同步变化 .. 使用一个 --tunnel 选项，可以再为项目生成一个外网的链接，把这个链接分享给别人，这样你对项目的修改，在页面上的操作也会同步显示给所有人。
打开终端，ctrl + C 先停止一下当前执行的任务 ... 然后再调出之前执行的 browser-sync 命令 ... 在这里加上一个 --tunnel 选项 .. 执行一下 ..
browser-sync start --server --files "css/*.css, index.html" --tunnel
这回在这个可以访问的地址里面，多了一个 Tunnel 地址 ... 地址是 localtunnel.me 结尾的，前面是一串随机生成的字符 ... 你可以把这个地址分享给其它人 .. 他们在自己的浏览器打开这个地址就可以看到你对项目的修改了 ... 这里我还是在 iPad 上打开这个分享的地址 ...
在本地的电脑上，新建一个浏览器的标签，同样再打开这个地址 ... 然后回到编辑器，修改一下项目里的东西 .. 保存 ... 你会看到，这里会同步项目的变化 ..
同样， 对这个页面的操作，也会同步给所有的浏览器 .. 注意这个同步需要通过互联网 ..
来自 https://ninghao.net/video/2682#info
8)--proxy：代理
默认 Browsersync 提供的服务器只能处理 html,css 还有 javascript ， 你的应用可能需要一些其它的技术，比如 WordPress，Drupal，Laravel 都需要可以运行 PHP 的服务器 ..
你可以正常运行这些应用，然后把它们的服务器设置成代理，这样我们就可以使用 Browsersync 提供的同步浏览器的功能了。
在这里运行的是一个 Meteor 的应用，服务的地址是 localhost:9090 ... 下面可以去把它设置成一个代理 .. 回到终端 .. 新建一个标签 ...
输入 browser-sync start，后面加上一个 --proxy 选项 .. 在它后面指定一下代理服务的地址 .. 这里就是 Meteor 应用运行的那个地址 .. localhost:9090 .. 回车执行一下 ..
browser-sync start --proxy localhost:9090
(browser-sync start --proxy localhost)
会提示代理是 localhost:9090 .. 使用 Access URLs 下面的地址，就可以访问到这个 Meteor 应用了 .. 可以在几个浏览器上打开这个地址 ... localhost:3000 或者使用 192.168.1.140:3000 ..
回到浏览器 ... 可以再新建一个标签 .. 然后再打开这个地址 ..
点击边栏上的链接 ... 会在所有浏览器上同步页面的变化 ... 勾选一下复选框 ... 也会同步变化 .. 新建一个列表 .. 在左边这个浏览器上你会看到这个新创建的列表 ..
再输入点东西，在所有浏览器上会实时显示输入的东西 .. 再点下这个 Join 按钮 ... 同样其它的浏览器也会同步页面的变化 ..
有个地方要注意一下，就是代理的地址可能是你手工编辑本地电脑的 hosts ，设置的一个虚拟的主机名 .. 比如 ninghao.local ... 实际上这个主机名指向的是本地的电脑，或者某个内网的 IP 地址 .. 注意，要想使用 Browsersync ，你的这个主机名要是 .dev，比如 ninghao.dev ，不然会非常慢。
来自 https://ninghao.net/video/2683
自动化
9)Browsersync 整合到 Gulp 任务
如果你用 Gulp 为项目创建了一些自动执行的任务，你也可以把 Browsersync 做成一个 Gulp 任务 .. 打开终端 ... 进入到我们最开始创建的这个项目所在的目录 ...
这里已经安装好了 browser-sync，所以我们只需要再去安装一下 gulp ..
npm install gulp --save-dev
再用编辑器打开这个项目 ..
atom .
新建一个 gulp 任务文件 .. 文件名是 gulpfile.js .. 先把这两个模块引用进来 .. 一个是 gulp
req
还有就是 browser-sync .. 注意这里需要用一个 create 方法创建一个对象 ..
var gulp = require('gulp');
var browserSync = require('browser-sync').create();
再去添加一个 browser-sync 的任务 .. gulp.task .. 任务的名字设置成 browser-sync .. 再用一个匿名函数 .. 在它里面使用 browserSync 的 init 这个方法 .. 给这个方法一个对象 ... 在这个对象里是 browser-sync 的一些选项，可以配置一下它的一些行为 ..
比如我们要创建一个服务器，可以在这个对象里添加一个 server 属性 .. 这个属性的值又是一个对象 .. 关于这些选项你可以参考 Browsersync 官方的文档 ..
http://www.browsersync.io/docs/options/
这里用一个 baseDir .. 设置一下服务器的根目录 .. 它的值设置成 ./forest 表示使用项目的根目录下的 forest 作为服务器的根目录 .. 下面再添加一个 files 属性，指定一下要监视的文件 .. 把这些文件模式放到一个数组里 .. 一个是 forest/index.html ，逗号分隔开 ... 还有就是 forest 下面的 css 目录下的所有的 css 文件 .. 保存 ..
回到终端 ... 你需要再安装一下 gulp 的命令行工具 ...
npm install -g gulp
完成以后，再执行：
gulp browser-sync
现在我们就可以使用 browser-sync 的功能了 .. 使用 Gulp 的好处就是，你可以保留对 browser-sync 的设置 .. 可以配合其它的任务一起使用。