想象一个场景，你有两个显示器，一个是集成开发环境中的代码，另一个是你正在浏览器中开发的应用程序。这个时候桌子上还有你的手机，也是正在开发的应用。然后，你写了一点新的代码，并按下ctrl+s来保存它。然后，手机和另一个显示器中的应用程序就变成了更新后的效果。你可以立即检查效果是否和你预期的一样，甚至不用移动鼠标…

想起来还不错吧？嗯，这只是省略了F5刷新，它将在开发过程中重复多次。

自动刷新

“自动刷新”并不是一个新概念，但它非常容易使用，对于注重“可见”预览效果的前端开发者来说，可以节省很多时间。

直到现在我才知道这个概念。在此之前，我一直在使用LiveReload，这是一个名字“自动刷新”写得比较清楚的工具。LiveReload主要用于浏览器插件，这是一个很棒的自动刷新工具。

但是现在我想介绍一下BrowserSync。正如您将在以下内容中看到的，它是一个更新、更方便的开发工具。

BrowserSync

LiveReload的缺点是需要浏览器插件。然而，插件依赖于浏览器。Chrome和Firefox都有可用的插件，但是IE，或者我手机上的浏览器就不行了。此时，您只能手动将脚本代码添加到页面中(事实上，插件也是这样做的)，并记住在结束后手动删除它。

BrowserSync的一般用法不需要浏览器插件，也不需要手动添加代码(尽管也提供了这种用法)。一个控制台命令后，无论手机或电脑使用多少浏览器(测试过的，IE8等)，都可以有自动刷新的功能。

BrowserSync是如何做到的？请看它的安装和使用。

安装和使用

安装节点后，通过npm安装浏览器同步：

Npm安装-g浏览器-同步然后，你可以开始使用它。打开控制台，输入项目所在的目录，然后输入如下命令：

浏览器-同步开始-服务器-文件' CSS/*。‘CSS’用于纯静态站点，也就是说，只有一些。html文件。以下是文件的css/*。“css”指的是监听带后缀的文件。CSS目录中的CSS。请注意这个命令中的start - server，其实是BrowserSync自己启动了一个小服务器。

如果是动态网站，请使用代理模式。例如，一个PHP站点已经建立了一个本地服务器，如http://localhost:8080，这个命令将是：

浏览器-同步开始-代理' localhost :8080 '-文件' CSS/*。CSS的browsersync将提供一个新地址(如果没有被占用，则为http://localhost:3000)用于访问。

好了，为什么BrowserSync不需要浏览器插件？因为它使用服务器(直接或代理)的形式来处理项目文件。默认情况下，访问其服务器上的网页，您可以看到此提示选项卡：

提示标记：已连接到浏览器同步

这表示当前浏览的网页已连接到浏览器同步。查看源代码，您会发现它们都添加了与BrowserSync相关的脚本代码，就像LiveReload浏览器插件一样。这些代码将在浏览器和浏览器同步的服务器之间建立网络套接字连接，如果被监控的文件发生变化，浏览器同步将通知浏览器。

如果更改的文件是css，BrowserSync不会刷新整个页面，而是直接重新请求这个css文件，并将其更新到当前页面。效果是这样的：

很明显，感觉更快。如果您正在开发单页应用程序(SPA)，刷新整个页面将返回到原始视图，并且您需要修改以后的视图，该功能特别有用。

文件匹配

从BrowserSync的命令中，通过文件指定要监控的文件是非常重要的。有关文件匹配模式(称为glob)的详细信息，请参见isaacs的minimatch。

经过我自己的尝试，如果我只是想监控整个项目，我可以写如下：

浏览器-同步启动-服务器-文件' ** '

此时，BrowserSync仍能正确判断文件更改是否为css。

加入饮料中使用

大口是现在比较流行的自动化工具，但是BrowserSync没有大口插件版本，因为不需要。BrowserSync有自己独立的API，所以把它注册成一个大口的任务。以下是gulpfile.js的一个示例：

var大口=require('大口')；var browser sync=require(' browser-sync ')；gough . task(' browser-sync '，function(){ browserSync({ files : ' * *)，server : { base dir : })。/' } });});gough . task(' default '，[' browser-sync '])；此时运行大口相当于浏览器-同步启动-服务器-文件' * * '。有关更多用法示例，请参见浏览同步。

完整选项

到目前为止，我们已经介绍了BrowserSync的基本用法。尝试仅在控制台中输入：

浏览器同步

您将看到BrowserSync完整的控制台命令指南。可以看出，有这个命令：

Browser-sync init运行它，并将在当前目录中生成一个配置文件bs-config.js。

参照正式文件修改此文件，然后运行它

browser-sync start-config bs-config.js将使用bs-config . js的完整配置信息运行BrowserSync。

不仅仅是自动刷新

BrowserSync不仅仅是一个自动刷新工具，它还有很多其他功能。默认情况下，BrowserSync在多个浏览器中同步滚动条位置、表单行为和单击事件。例如，表单的行为如下所示：

我觉得这是一个很酷的功能！想象一下，把很多不同屏幕大小的手机放在桌子上测试。如果你操作一个，你会带动其他人一起！当然，这些功能也可以在不需要的时候关闭。

用户界面和其他以下是浏览器同步的控制台输出示例：

可以看到还有一个叫UI的地址，是BrowserSync提供的一个简单的控制面板。浏览器同步最常用的配置选项可以在此面板中调整。

在面板中，您还会发现经典的远程调试工具weinre也在这里：

浏览器同步目前已知的一个问题

如前所述，如果更改后的文件是css，那么BrowserSync会在不刷新的情况下更新，这是一个很好的效果。如果使用诸如SCS等预编译器，可以设置对编译后的css文件的侦听。

但是，网络应用程序框架Rails会有一些问题。在开发环境中，css在被请求时被编译(Rails通常使用sass)，然后返回到浏览器。它只有缓存，但没有实际的。css文件。因此，BrowserSync的文件监控将无法指向它们，但如果指向sass文件，浏览器只会以整页刷新的形式处理它们。有关此问题，请参见Github上的问题。

一个可行的解决方案是用其他工具替换Rails的资产管道。但是在这里，我推荐另外一个解决方案：使用liveleroad(liveleroad，你还是有点水平的！)。经过测试，LiveReload还可以在Rails中处理css快速更新。根据LiveReload的原理，您可以在rails中读取闪电般的sass重载。

我也期待BrowserSync以后能解决这个问题。

结论

想在开发上更流畅更快速？试试浏览器同步！节省一点时间，你也许能做得更多。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。