这两天在看姜老大的响应式一站开发,从中看到了很多的之前没有看到过的东西,学到了很多!
这里就着重的写一下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里面的文件变了他就能同步的更新到浏览器上,不用刷新就可以看到效果,确实挺好的