Browsersync 能让浏览器实时、快速响应文件更改(html、js、css、sass、less等)并自动刷新页面。更重要的是 Browsersync可以同时在PC、平板、手机等设备下进项调试,当使用browsersync后,任何一次代码保存,以上的设备都会同时响应文件的改动。效果如下:

(图片来自:http://www.browsersync.cn/

如何使用?

1、安装Node.js

BrowserSync是基于Node.js的, 是一个Node模块,Node.js可以从官网下载,当前最新版本6.2.0,稳定版本4.4.4,建议下载最新版,下载后直接安装即可。

下载地址: http://nodejs.cn/

2、安装 BrowserSync

在终端窗口中运行以下命令(全局安装以便在所有的项目中都能使用):

npm install -g browser-sync

若配合gulp或grunt等构建工具使用,则可以在需要构建的项目里面安装:

npm install --save-dev browser-sync

3、启动 Browser-Sync

静态网站

假如需要监听 .css 文件,则在终端输入如下命令即可(Browser-sync 会启动一个小型服务器,并提供一个 url 来查看网站):

// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css"

若需要监听多个类型的文件,用逗号隔开即可:

// --files 路径是相对于运行该命令的项目(目录)
browser-sync start --server --files "css/*.css, *.html"
// 如果文件层级比较深,您可以考虑使用 **(表示任意目录)匹配,任意目录下任意.css 或 .html文件。
browser-sync start --server --files "**/*.css, **/*.html"

动态网站

如果要在本地服务器下监听文件变化,则需要使用代理模式,BrowserSync 将通过代理 URL(localhost:3000) 来查看网站。

// 主机名可以是ip或域名
browser-sync start --proxy "主机名" "css/*.css"

运行效果如下:

和LiveReload比较

LiveReload 需要搭配浏览器插件。Chrome和Firefox都有可用插件,但在IE或者手机浏览器没有对应的插件。

BrowserSync 则不需要浏览器插件,一句简单的控制台命令之后,无论是在手机还是电脑,无论用多少个浏览器,都可以拥有自动刷新的功能。

为什么BrowserSync不需要浏览器插件?

因为它使用了服务器的形式(直接或代理)来处理项目文件。默认情况下,访问它的服务器上的网页,可以看到这样的提示签:

这说明当前浏览的网页已连接到BrowserSync。查看一下源码,会发现它们都被添加了与BrowserSync有关的一段 <script> 代码,就像LiveReload浏览器插件做的那样。这些代码会在浏览器和BrowserSync的服务器之间建立web socket连接,一旦有监听的文件发生变化,BrowserSync会通知浏览器。

单页应用?

如果发生变化的文件是css,BrowserSync 不会刷新整页,而是直接重新请求这个css文件,并更新到当前页中。

如果你正在开发的是一个单页应用,刷新整页会回到初始视图,而你又需要修改后面的某一个视图时,这一功能尤其有用。

在Gulp中使用 BrowserSync

Gulp是现在流行的自动化工具,但BrowserSync并没有Gulp插件版,因为并不需要。BrowserSync有自己独立的API,将它注册为gulp的一个task即可。如下:

var gulp = require('gulp');
var browserSync = require('browser-sync');
gulp.task('browser-sync', function() {
browserSync({
files: "**",
server: {
baseDir: "./"
}
});
});
gulp.task('default', ["browser-sync"]);

这时候运行 gulp 将等同于前文的 browser-sync start --server --files "**"  。

参考资料

http://www.browsersync.cn/

http://www.tuicool.com/articles/vUriay

浏览器同步测试神器 — BrowserSync的更多相关文章

  1. 省时的浏览器同步测试工具 browsersync NodeJS

    http://www.browsersync.cn/ 省时的浏览器同步测试工具 Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面 ...

  2. PC和移动端浏览器同步测试工具Browsersync使用介绍

    在移动端网页开发中,总是因为不方便调试,导致各种问题不容易被发现.但是现在有了Browsersync,一切都解决了. 不熟悉的同学可以看看Browsersync的官方网站Browsersync中文网. ...

  3. BrowserSync - 浏览器同步测试工具

    背景: 之前在学gulp的时候,使用gulp-livereload来实时自动刷新页面省时开发,但一直比较难用,现在找到新的替代神器. 安装:   // 使用淘宝镜像会快些 npm install -g ...

  4. mac安装浏览器同步测试工具

    1.安装node.js (1)打开终端,输入以下命令安装Homebrew ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebre ...

  5. Browsersync — 省时的浏览器同步测试工具

    Browsersync能让浏览器实时.快速响应您的文件更改(html.js.css.sass.less等)并自动刷新页面.更重要的是 Browsersync可以同时在PC.平板.手机等设备下进项调试. ...

  6. BrowserSync(省时的浏览器同步测试工具)

    第一步:安装node 第二步:安装BrowserSync npm install -g browser-sync 第三部:启动BrowserSync 假如我在D盘建立一个文件test,里面分别包括in ...

  7. Browsersync 省时浏览器同步测试工具,浏览器自动刷新,多终端同步

    官网地址 http://www.browsersync.cn/ 1.安装 BrowserSync npm install -g browser-sync 2.启动 BrowserSync // --f ...

  8. 使用Gulp里面的浏览器同步插件browser-sync的注意事项

    使用Gulp里面的浏览器同步插件browser-sync的注意事项 第一步:打开你的开发者工具, 编写前端代码!图如下! 第二步:打开你当前工作目录的命令行窗口 第三步:输入浏览器同步执行的代码! b ...

  9. 移动端页面调试神器-browser-sync

    最近公司赶一个项目,是mobile端,之前没怎么做过移动端的开发,这个项目算是个小尝试. 在做项目的过程中,用到了一个神器--browser-sync,在这里分享给大家. 1.静态页面调试 作为前端, ...

随机推荐

  1. underscore.js依赖库函数分析二(查找)

    查找: 在underscore.js封装了对dom查找的操作,find()和filter()函数,find()函数的查找操作是返回首个与条件相符的元素值,filter()函数是找到与条件相符的所有元素 ...

  2. ai seek

    原文地址链接:http://gamedevelopment.tutsplus.com/tutorials/understanding-steering-behaviors-seek--gamedev- ...

  3. UVa 10870 & 矩阵快速幂

    题意: 求一个递推式(不好怎么概括..)的函数的值. 即 f(n)=a1f(n-1)+a2f(n-2)+...+adf(n-d); SOL: 根据矩阵乘法的定义我们可以很容易地构造出矩阵,每次乘法即可 ...

  4. ACM: NBUT 1646 Internet of Lights and Switches - 二进制+map+vector

    NBUT 1646 Internet of Lights and Switches Time Limit:5000MS     Memory Limit:65535KB     64bit IO Fo ...

  5. 没人告诉你关于z-index的一些事

    关于z-index的问题是很多程序员都不知道它是如何起作用的.说起来不难,但是大部分人并没有花时间去看规范,这往往会照成严重的后果. 你不信?那就一起来看看下面的问题. 问题 在下面的HTML我们写了 ...

  6. 2015 CTSC & APIO滚粗记

    o诶人太弱..... 记一发滚粗记以便治疗我的健忘症= = //文章会不定时修改,添加一些内容什么的...因此最好看一下刷新一下(因为有可能你正在看= =我正在写... 5.2 早上9点坐上长达11小 ...

  7. URAL 1057. Amount of Degrees(数位DP)

    题目链接 我看错题了...都是泪啊,不存在3*4^2这种情况...系数必须为1... #include <cstdio> #include <cstring> #include ...

  8. NOI模拟 热身赛T1

    设p(m)的值为m的正因数个数(包括1和m本身)给定n,求满足p(x)=n的最小x. 简直弱到不行了... VW做法: 其实蛮简单的,然而想的时候忽略了指数是不增的 然后你以为做完了吗? 愚蠢的贡献了 ...

  9. About_PHP

    所谓PHP: 超文本预处理器 外文名称 Hypertext Preprocessor 编程范型 面向对象.命令式编程 php就是比js更高端的一种语言. 语法有两种: <?php      ?& ...

  10. ifstream 作为函数参数 需要加&

    ifstream作为函数的参数要加&   参考:http://www.cnblogs.com/growup/archive/2011/03/03/1971528.html void foo(i ...