省时的浏览器同步测试工具 browersync

这两天在看姜老大的响应式一站开发，从中看到了很多的之前没有看到过的东西，学到了很多！

这里就着重的写一下browersync的使用

http://www.browsersync.cn/#install 中文网地址

1、认识

2、安装

http://www.browsersync.cn/docs/#installation

browsersync是基于node.js使用的，所以在使用之前要安装node.js

安装^ TOP

Global Install（全局安装）

如果你想在任何目录的命令行中运行Browsersync ，可通过global命令进行全局安装。

$ npm install -g browser-sync

Local Install（本地安装）

我们推荐这种方式来安装 Browsersync - 通过本地安装到每个项目。这种方式的可以使依赖被添加到你的package.json文件里（gulp或grunt构建方式），以便其他人可以便捷使用。

$ npm install browser-sync --save-dev

文件实例^ TOP

# 单个文件 
$ browser-sync start --files "css/core.css"

# 单模式
$ browser-sync start --files "css/*.css"

# 多个文件 
$ browser-sync start --files "css/core.css, css/ie.css"

# 多模式 
$ browser-sync start --files "css/*.css, *.html"

服务器实例^ TOP

# 使用当前目录为根＃静态服务器
$ browser-sync start --server

# 使用“应用程序”目录的根目录＃静态服务器
$ browser-sync start --server app

# 使用当前目录与目录列表根＃静态服务器 
$ browser-sync start --server --directory

代理实例^ TOP

# 使用local.dev虚拟主机
$ browser-sync start --proxy

# 使用local.dev虚拟主机与港口 
$ browser-sync start --proxy local.dev:8001

# 使用本地主机地址 
$ browser-sync start --proxy localhost:8001

# 在子迪尔使用本地主机地址 
$ browser-sync start --proxy localhost:8080/site1

看文件+服务器^ TOP

# 观看所有的CSS文件与静态服务 ​​器修改 
$ browser-sync start --files "app/css/*.css" --server

# 观看所有的CSS文件与静态服务 ​​器的更改
# 使用“应用程序”作为基本目录
$ browser-sync start --files "app/css/*.css" --server "app"

重载选项^ TOP

--files	文件路径重载
--port	通过目标端口号的运行实例
--url	提供完整的URL运行Browsersync实例

重载 HTTP协议^ TOP

$ browser-sync reload

重载带端口的HTTP协议^ TOP

$ browser-sync reload --port 4000 --files="*.css"

重载全URL http协议^ TOP

$ browser-sync reload --url https://localhost:3000 --files="*.css"

这里根据他提示的访问网址分别在谷歌、火狐、ie的浏览器里面打开网页，这里监控的是src所以在src里面的文件变了他就能同步的更新到浏览器上，不用刷新就可以看到效果，确实挺好的