从某些方面来衡量,「嫌麻烦」和「爱偷懒」应该算是合格程序员必备的特质。这样才能敏锐意识到一些重复在做的事情,并有动力去改善它们。今天要介绍的 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 赋予的无需手动刷新和相关自动同步功能带来的便利了。