说真的，你真应该用上了。Browsersync是一个杰出的工具，它允许你在多个屏幕上同步浏览器的显示内容。这听起来并不那么令人印象深刻（感觉没啥），但在实际应用场景中却截然不同。它是如此令人印象深刻，我觉得我需要做一个 .gif 来演示一下，否则你可能注意不到 Browsersync 是多么厉害。

上面的图片显示了四种不同的浏览器，所有的浏览器都是同步显示的。我只是在右上方的浏览器中做了一些交互，通过 Browsersync 其他三个被自动同步更新。

你为什么要使用它呢?

拿我来说，我知道 Browsersync 已经有一段时间了一直没有去尝试它。但是，当我上星期五安装它的时候我非常惊讶，它是如此简单，它是一个杰出的工具用来测试多个浏览器下页面的呈现。甚至移动浏览器都可以很好的运行 Browsersync，而且可以很容易的集成到 gulp 中去，这样我就可以在 CSS 或 JavaScript 被编译时刷新所有连接的浏览器。需要重载(浏览器刷新或更新样式)和同步(多屏浏览器) 等更多功能吗？Browsersync提供得功能和特性可不止这两个哦。

远程调试

当你像我一样用Linux系统环境做开发时，有人走到你面前向你展示一个在iPhone手机中得bug，修复它是一个很麻烦的事。调试一个iPhone上 Safari 浏览器中的 bug 如果没有 MAC 在附近是几乎不可能完成的。用 Browsersync 去调试就像 iPhone 到 Browsersync 那么容易，你可以远程检查DOM，控制台等。这是不是很棒？如果这都不cool的话，我真不知道还有什么能更cool。

个性化设置

让我们建立Browsersync不管你现在正在进行的是什么样得项目。第一次安装 Browsersync 需要通过 NPM：

1

npm install browser-sync --save-dev

确保你的 gulp 已经安装好，如果你从来没有使用过 gulp 那么你可能想看看我的这篇文章 开始使用gulp.

在你的 gulpfile.js 文件中引入 Browsersync 包。

1

var browserSync = require('browser-sync');

比方说，当我们执行 gulp watch 任务时启动 Browsersync。然后每当CSS文件发生变化就刷新浏览器。这样做其实非常简单。代码如下：

1
2
3
4
5
6
7

gulp.task('watch', function(){
    browserSync({
        proxy: 'http://localhost:5000'
    });
 
    gulp.watch({glob: 'scss/**/*.scss'}, ['css', browserSync.reload]);
});

上方代码的第一行是创建一个watch(监听)任务。然后3到5行是开启 Browsersync。我传的唯一的参数是一个代理配置。在这个例子中，假设你已经有一套开发配置，并运行在你的应用程序服务器上。我试着用Browsersync启动一个用Python开发的应用程序，所以使用代理是我的用例的最好使用方式。 你也可以选择一个文件夹运行 Browsersync，这就看你的需求。查看文件获取更多配置选项。

当CSS文件发生变化时我们开始css任务。接下来触发的任务是browserSync.reload 函数。当这个函数被调用后所有连接的浏览器都会刷新。能够做到这一切，都是因为你使用Browsersync。

当你输入 gulp watch 启动你的监控任务时，Browsersync会告诉你控制台的URL，它还会告诉一个 UI URL，在这个地址里你会发现一些杰出的功能和调试选项。你应该尝试去探索一下它们的用处，它们真的很不错。

在命令行使用的技巧

打开命令行，在你的项目（专题）目录下运行

1

browser-sync start --server --files="*.html,css/*.css,*.css" --browser="google chrome" --open="external"

就会在以当前目录为服务器的/根目录，建立起一个调试服务器，在你完成一个个小项目（用不到gulp（甚至package.json+node_modules）这么想对重的工具）时，这行命令行会拯救你。

当然，在此之前，要先全局安装Browsersync才行哦。

1

npm install browser-sync -g

展望未来

现在你已经了解 Browsersync的配置方法就可以开始探索它的强大功能。Browsersync文档真的很不错，深入的探讨了所有可以传递给它的参数。一旦你开始审查页面上的所有的元素，你会发现调试器真的很强大，值得使用的。希望你会喜欢使用Browsersync和这种开发方式，它可以加快你的开发工作流程。

如果你觉得我遗漏了什么，或者你有任何问题或意见，可以联系我的Twitter.

原文地址：http://blog.donnywals.com/you-should-start-using-browsersync-today/