在建设响应式网站时，我们需要以多种屏幕尺寸对其进行测试，以确保在不同屏幕尺寸上正确呈现网站布局。我们可以在chrome中使用屏幕尺寸和设备模拟器，非常方便。然而，没有什么能比真实设备上的网站测试更好，因为它提供的环境与我们的用户一样接近。
但是，在多个设备上进行测试也会带来问题。假设我们有三个设备来测试网站，我们可能最终不得不每次我们刚刚做出改变时不断刷新每个设备中的每个浏览器，正如您可以想象的那样，这很麻烦。
已经出现了同步测试的想法以解决这种情况并使工作流程更加简化。有一个名为browsersync的grunt插件可以执行此操作，我们将在本文中向您展示如何在项目中部署它。
browsersync是开源的，并且是积极开发的。它是跨平台的。您可以在windows，os x和linux中使用它。另一方面，ghostlab仅适用于os x和windows。browsersync是免费的，如果您几乎没有预算可以使用，这将有所帮助。
不用多说，让我们看看browsersync的工作原理。
安装首先，我们将使用grunt。我们需要确保grunt-cli和插件grunt browsersync一样安装。此插件同步网站上发生的许多交互，包括页面滚动，填充表单字段和单击链接。
所有这些操作将在其他浏览器和设备中反映出来。键入以下命令以在工作目录中安装browsersync：
1
2
npm install grunt --save-dev
npm install grunt-browser-sync --save-dev
组态安装完成后，以这种方式在gruntfile.js中加载browsersync?。
1
2
3
4
五
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
module.exports = function (grunt) {
grunt.initconfig({
?browsersync: {
bsfiles: {
src : [ 'index.html', './css/*.css' ]
},
ghostmode: {
clicks: true,
forms: true,
scroll: true
},
options: {
server: {
basedir: ./
}
}
?}
});
// load npm tasks
grunt.loadnpmtasks( 'grunt-browser-sync' );
// define default task
grunt.registertask( 'default', ['browsersync'] );
}
此配置将监视style.css以及index.html在检测到这些文件发生更改时自动刷新浏览器。我们还可以ghostmode同步网站上的互动，例如滚动和点击。
一切都准备好了。现在，我们运行grunt以启动browsersync我们已在配置中设置的任务。
1
grunt
与旧版本不同，新的browsersync现在将设置使用的所有内容，包括静态服务器，并提供其所在的url以重新加载我们的站点。
您可以从以下动画gif中看到，所有更新，更改和交互都会在浏览器中实时同步，因为更改了index.html和style.css。