Browsersync — 省时的浏览器同步测试工具
Browsersync能让浏览器实时、快速响应您的文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试。
原理
当网页已连接到BrowserSync的时候,我们可以查看一下源码,会发现它们都被添加了与BrowserSync
有关的一段<script>
代码,就像liveReload
浏览器插件做的那样。这些代码会在浏览器和BrowserSync
的服务器之间建立web socket
连接,一旦有监听的文件发生变化,BrowserSync
会通知浏览器。
如果发生变化的文件是css
,BrowserSync
不会刷新整页,而是直接重新请求这个css
文件,并更新到当前页中。
快速入门
1、安装node.js
2、安装 BrowserSync
npm install -g browser-sync
3、启动 BrowserSync
如果您只希望在对某个css
文件进行修改后会同步到浏览器里。那么您只需要运行命令行工具,进入到该项目(目录)下,并运行相应的命令:
静态网站
如果您想要监听.css
文件, 您需要使用服务器模式。 BrowserSync 将启动一个小型服务器,并提供一个URL来查看您的网站。
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"
如果您需要监听多个类型的文件,您只需要用逗号隔开。例如我们再加入一个.html
文件:
// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果你的文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"
// 监听多个文件,**代表监听当前目录下的所有文件的变化,我们只需要在项目根目录开启BrowserSync即可监听整个项目,当然,BrowserSync仍然会正确地判断文件变化是否是css。
browser-sync start --server --files "**"
运行以上其中一条命令,Browsersync将创建一个本地服务器并自动打开你的浏览器后访问http://localhost:3000地址。
动态网站
如果您已经有其他本地服务器环境PHP或类似的,您需要使用代理模式。 BrowserSync将通过代理URL(localhost:3000)来查看您的网站。
// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"
在本地创建了一个PHP服务器环境,并通过绑定Browsersync.cn来访问本地服务器,使用以下命令方式,Browsersync将提供一个新的地址localhost:3000来访问Browsersync.cn,并监听其css目录下的所有css文件。
browser-sync start --proxy "Browsersync.cn" "css/*.css"
来源:http://www.browsersync.cn/docs/gulp/
Browsersync — 省时的浏览器同步测试工具的更多相关文章
- BrowserSync(省时的浏览器同步测试工具)
第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...
- 省时的浏览器同步测试工具 browsersync NodeJS
http://www.browsersync.cn/ 省时的浏览器同步测试工具 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 ...
- BrowserSync - 浏览器同步测试工具
背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装: // 使用淘宝镜像会快些 npm install -g ...
- mac安装浏览器同步测试工具
1.安装node.js (1)打开终端,输入以下命令安装Homebrew ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebre ...
- Browsersync 省时浏览器同步测试工具,浏览器自动刷新,多终端同步
官网地址 http://www.browsersync.cn/ 1.安装 BrowserSync npm install -g browser-sync 2.启动 BrowserSync // --f ...
- PC和移动端浏览器同步测试工具Browsersync使用介绍
在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. ...
- Web浏览器兼容性测试工具如何选择
对于前端开发工程师来说,网页兼容性测试工程师而言,确保代码在各种主流浏览器的各个版本中都能正常工作是件很费时的事情,幸运的是,有很多优秀的工具可以帮助测试浏览器的兼容性,领测软件测试网向您推荐12款很 ...
- Android WebDriver 浏览器自动测试工具介绍
Selenium WebDriver 是浏览器自动测试工具,提供轻量级和优雅的方式来测试web应用.Selenium WebDriver作为Android SDK extra,支持Android 2. ...
- 浏览器同步测试神器 — BrowserSync
Browsersync 能让浏览器实时.快速响应文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试,当 ...
随机推荐
- Storm 单机版环境搭建
1 需要安装的软件 要使用storm首先要安装以下工具:python.zookeeper.zeromq.jzmq.storm 1.1 安装zeromq wget http://download.zer ...
- 如何在网页中添加“QQ交流”
今天在撸码时,想到这个问题,有些网页中会有诸如,那么如何在网页添加"QQ交谈"? 第一步.登录QQ: 第二步.打开网页:QQ推广,启用QQ通讯组件: 第三步.选择组件样式,设置提示 ...
- iOS开发
#import 预处理指令,相对于 #include 而言,能防止重复拷贝,它可以导入OC头文件,也可以导入C头文件. OC中在一个框架中,有一个主头文件(该头文件名称一般跟框架名称相同),该主头文件 ...
- 《大道至简》第一章读后感--JAVA语言伪代码形式
import.java.大道至简.*; //一·愚公移山 import.java.愚公移山.*; public class YuGongYiShan { //原始需求:惩山北之塞,出入之迂 //项目沟 ...
- lib库dll库的使用方法与关系
一.lib库 lib库有两种:一种是静态lib(static Lib),也就是最常见的lib库,在编译时直接将代码加入程序当中.静态lib中,一个lib文件实际上是任意个obj文件的集合,obj文件是 ...
- 【阮一峰】深入研究URL编码问题及JavaScript相应的解决方案
作者: 阮一峰 日期: 2010年2月11日 一.问题的由来 URL就是网址,只要上网,就一定会用到. 一般来说,URL只能使用英文字母.阿拉伯数字和某些标点符号,不能使用其他文字和符号.比如,世界上 ...
- Spring中的JdbcTemplate使用
1.引出SpringJDBC的概念 在学习JDBC编程时我们会感觉到JDBC的操作是多么繁琐,那么当我们学习的Hibernate框架时,我们感觉到数据库的操作也变非常简单,提高了开发效率.但是当使用H ...
- MySQL索引的Index method中btree和hash的优缺点
MySQL索引的Index method中btree和hash的区别 在MySQL中,大多数索引(如 PRIMARY KEY,UNIQUE,INDEX和FULLTEXT)都是在BTREE中存储,但使用 ...
- CentOS下安装JDK1.7
1.安装包准备: 首先到官网下载jdk,http://www.oracle.com/technetwork/java/javase/downloads/jdk7-downloads-1880260.h ...
- position:fixed失效
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...