在构建响应式网站时，我们需要在多种屏幕尺寸下进行测试，以确保网站布局在这些不同屏幕尺寸上都能正确呈现。我们可以在 Chrome 中使用屏幕尺寸和设备模拟器，这非常方便。然而，没有什么比在真实设备上测试网站更好的了，因为它提供了一个尽可能接近我们用户的环境。
不过，在多台设备上进行测试也会带来问题。假设我们有三台设备来测试网站，每次我们做出更改后，我们可能不得不不断刷新每台设备上的每个浏览器，你可以想象，这是多么麻烦。
为了解决这种情况并使工作流程更加简化，出现了同步测试的想法。有一个名为BrowserSync的 Grunt 插件可以执行此操作，我们将在这篇文章中向您展示如何在您的项目中部署它。
BrowserSync 是开源的，并且正在积极开发中。它是跨平台的。您可以在 Windows、OS X 和Linux中使用它。另一方面，Ghostlab 仅适用于 OS X 和 Windows。BrowserSync 是免费的，如果您的预算很少或没有预算，这会很有帮助。
不用多说，让我们看看 BrowserSync 是如何工作的。
安装
首先，我们将使用 Grunt。我们需要确保安装了 grunt-cli 以及插件Grunt BrowserSync。此插件同步网站上发生的许多交互，包括页面滚动、填充表单字段和单击链接。
所有这些操作都会反映在其他浏览器和设备上。输入以下命令在工作目录中安装 BrowserSync：
npm install grunt --save-devnpm install grunt-browser-sync --save-dev
配置
安装后，通过这种方式在Gruntfile.js中加载 BrowserSync。
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 tasksgrunt.loadNpmTasks( 'grunt-browser-sync' );// define default taskgrunt.registerTask( 'default', ['browserSync'] );}
此配置将监视style.css以及index.html，并在检测到这些文件发生更改时自动刷新浏览器。我们还允许ghostMode同步网站上的交互，例如滚动和单击。
一切就绪。现在，我们运行grunt来启动browserSync我们已经在配置中设置的任务。
1 |
|
与旧版本不同，新版 BrowserSync 现在将设置所有可使用的内容，包括静态服务器，并提供其所在的 URL 来重新加载我们的网站。
从下面的动态 GIF 中您可以看到，所有更新、更改和交互index.html都会随着和的更改在浏览器中实时同步style.css。
欢迎关注我，共同探讨学习科技前沿技术资讯，提升认知赚钱能力。
