从某些方面来衡量，「嫌麻烦」和「爱偷懒」应该算是合格程序员必备的特质。这样才能敏锐意识到一些重复在做的事情，并有动力去改善它们。今天要介绍的 Browsersync 就是一个可以「偷懒」的效率提升工具，它能解决 Web 开发场景下需要频繁手动刷新浏览器的操作问题。
Web 应用开发需要刷新浏览器的情况主要来自于前端场景，比如调整了 HTML 结构，修改了 CSS 样式代码，或是补充了一些 JS 功能。这些都需要通过刷新浏览器来查看修改后的效果。
在一些人看来，觉得手动处理这个操作是也没什么不妥，也没觉得它有多么影响开发效率。我之前也是这么觉得。不过自从接了两台显示器，习惯了用一台显示浏览器，一台显示代码编辑器的双屏工作方式后，就觉得有些不爽了。不爽的原因是需要来回在两个工作区域切换焦点窗口，或是移动鼠标。做这些操作也只是为了查看 HTML 或是 CSS 修改后的效果。所以我特别希望有个工具能在我不离开代码编辑器的前提下，及时更新浏览器端的显示效果，Browser 正是这样一个符合我预期的工具。
Browsersync 使用 JavaScript 语言，所以使用 NPM 工具来安装:
npm i -D browser-sync上面是以项目方式安装，只能在当前项目目录下使用。官方推荐是全局安装：
npm i -g browser-sync这样安装一次后，可以在当前系统上任何项目中使用。我因为使用了容器化的项目开发环境，所以没有采用这种方式。
安装好 Browsersync 后，如果当前目录下有 index.html 文件，只需要运行以下命令就可以启动 Browsersync 服务：
browser-sync -w如果和我一样使用的不是全局方式安装，需要在前面加上 npx 命令：
npx browser-sync -w服务启动后，会输出如下提示：
[Browsersync] Access URLs:
----------------------------------
Local: http://localhost:3000
External: http://false:3000
----------------------------------
UI: http://localhost:3001
UI External: http://localhost:3001
----------------------------------打开浏览器，访问 http://localhost:3000 可以查看 index.html 文件的输出内容。打开编辑器，尝试修改一下这个文件的内容，会发现浏览器会自动刷新并显示修改后的内容。
如果把 3000 端口换成 3001，会显示 Browsersync 提供的一个界面操作窗口。
这个界面除了显示一些跟当前项目相关的信息，还会提供一些配置操作。在这个界面提供的功能里，我注意到左侧第二个菜单：Sync Options。打开后界面如下：
通过这个界面可以看到，修改代码后自动刷新浏览器的操作只不过是其中一个功能，除此之外，Browsersync 还可以实现多浏览器或多设备下的表单输入和提交同步，点击事件同步，以及窗口滚动同步功能。
我尝试打开了两个窗口，测试了一下表单输入同步和滚动同步功能，相当丝滑，这算是意外收获。之后在做一些响应式界面时会更加方便不少。修改代码后不用手动去刷新多个窗口的体验不要太棒。
Browsersync 提供了丰富的命令参数，以配合各种不同类型的项目需求。除了可以指定要监控的文件目录，还可以配置代理访问，用来适配一些依赖于后端开发语言的项目。具体内容可以通过这篇官方文档来了解：
而我目前最常使用的 PHP 开发框架 Laravel 就刚好整合了 Browsersync 功能，用起来更加省事。在 Laravel 项目中只需要添加如下的配置到 webpack.mix.js 文件:
// ...
mix.browserSync({
proxy: 'http://zzxworld.local',
})
// ...注意:
http://zzxworld.local是我本地开发环境下项目的访问地址，此处仅为示例，需要修改为自己项目的访问地址。
然后执行 npm run watch 命令，会自动开始 Browsersync 相关依赖包的安装，等安装完成后重新再执行一次 npm run watch，然后在浏览器打开 http://localhost:3000 这个网址，就可以享受 Browsersync 赋予的无需手动刷新和相关自动同步功能带来的便利了。