0

本质上,问题在于 BrowserSync 直到我第一次更改文件后才“同步”,因此第一次“刷新”不是免费的。

背景:

我正在建立一个非常简单的存储库,其中我们有一个 gulp 进程,它生成由 browserSync 提供的静态文件。Gulp 监视这些文件,当它们发生变化时会导致 browserSync 重新加载。

尽管索引页面看起来不错,但在您第一次更改监视文件并手动刷新浏览器之后,自动刷新才会起作用。

我通过查看 Chrome 开发人员工具中的网络选项卡确认了这一点,并且可以看到在第一次加载时,在我手动更改文件之前不存在 websocket。然后,在我刷新浏览器后,我可以看到一个正确的 websocket 正在运行。无论您在更改文件之前刷新页面多少次,websocket 都不会初始化。

我在 BrowserSync slack 中询问过,检查了他们的问题并阅读了源代码,但仍然无法弄清楚为什么会发生这种情况。

如果需要,我可以使用各种相关文件的相关部分更新问题:

  • Dockerfile
  • 码头工人-compose.yml
  • gulpfule.js

我创建了一个截屏 gif,但整个内容大约是 20mb - 所以我没有上传它。

提前感谢您的帮助。

首次加载时终端中的 BrowserSync:

首次加载时终端中的 BrowserSync

首次加载时的网络选项卡 -没有 websocket

首次加载时的网络选项卡

更改文件后:

在我更改文件后

第一次更改文件后的网络选项卡 -使用 websocket

第一次更改文件后的网络选项卡

4

1 回答 1

0

解决了

我用一个简单的 javascript 创建了一个 loader.html,它会对与我的 BrowserSync 项目关联的本地 docker IP/端口 (3000) 执行飞行前请求。抓住机会,我会让它每 1000 毫秒循环一次,如果成功,我会重定向。

这就是引入问题的地方。

我在重定向到的同一个 IP/端口上执行飞行前请求,由于某种原因,“websocket”从我的飞行前检查中被“缓存”,然后不会重新初始化重定向或任何后续刷新。

我的解决方案是对 BrowserSync 的 UI 端口进行飞行前检查,该端口是 3001 而不是 3000。一旦启动,我可以毫无问题地重定向到 IP:3000。

于 2018-04-11T20:10:03.487 回答