gulp.browersync的机制是什么?例如多个浏览器的 cssinject 和 sync-scroll

What is the mechanism of gulp.browersync? Such as cssinject and sync-scroll for multiple browsers

gulp.browersync 对我来说就像黑魔法。我想了解它使用的技术。

在css-injection中,浏览器如何知道css文件被改变了?为什么不用刷新就可以重绘页面?为什么 .html/.js 更新不是这样?

当有多个浏览器打开同步页面时,如果其中一个向下滚动,其他浏览器将跟随。为什么?哪些动作可以同步,哪些不可以?真的很厉害。

根据我的理解,Browsersync 是一项可以做一些事情的服务...

当它在您的页面中注入一个 Javascript 文件时(请参阅您页面的源代码),黑魔法就出现了。如何?它在特定端口侦听连接(创建代理服务器),然后修改您的页面。

注入的 JS 监听服务正在发送的命令,通过网络套接字等技术......或者我认为对旧浏览器的简单异步请求......

例如,当您移动鼠标时,它会向其他页面发送类似的命令来复制状态...

还有 Browsersync,如果 运行,会持续监视您指定要监视的文件,例如 CSS 文件...并在这些文件发生更改时发送所需的命令。

许多自动化工具,如 Grunt 或 Gulp 可以与它​​集成,以获得您能想象到的最酷的开发工作流程...测试多个设备、重建缓存等等...

是的...这就像黑魔法 :D

在此处查看正在运行的 Browsersync 请求:https://webmshare.com/ovwGg

我也是 browsersync 的新手,目前我发现的内容如下:

BrowserSync 是一种自动化工具,可加快 Web 开发速度。 BrowserSync 允许您在工作目录周围启动本地 Web 服务器,以便通过将目标页面及其相关文件指向本地主机 URL,可以在连接到家庭网络的所有设备上立即访问它们。此外,它支持实时重新加载,因此您对页面或其 CSS 所做的任何更改都会触发所有连接设备上的浏览器刷新,供您预览。

BrowserSync 就像一个 LiveReload(它监视您对网页所做的更改并自动更新浏览器),除了它还适用于多个设备。

BrowserSync 能够在一个浏览器中滚动,并在所有其他浏览器中看到该操作的镜像。

动作同步功能(默认启用)会将滚动位置、点击和表单输入从一个浏览器复制到所有其他已连接的浏览器。 一些有用的 links:

我在使用 browsersync 的过程中遇到了一个问题,如果这里有人有兴趣回答可以访问 link:How to sync the actions performed on webpage using Browsersync?