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

时间:2016-10-06 08:35:52

标签: html css browser-sync

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

在css-injection中,浏览器如何知道css文件被更改了?为什么它可以在不刷新的情况下重绘页面?为什么不是.html / .js更新的情况?

当有多个浏览器打开同步页面时,如果向下滚动一个,则其他浏览器会跟随。为什么?可以同步哪些操作,哪些不同步?这太棒了。

2 个答案:

答案 0 :(得分:1)

对于我的描述,Browsersync是一项服务,可以完成一些事情......

在页面中注入Javascript文件时会出现黑魔法(请参阅页面的源代码)。怎么样?它是在特定端口(创建代理服务器)的监听连接,然后修改您的页面。

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

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

如果正在运行,Browsersync会继续观察您指定要观看的文件,例如CSS文件......如果更改了这些文件,则发送所需的命令。

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

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

请参阅此处的浏览器同步请求:https://webmshare.com/ovwGg

答案 1 :(得分:1)

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

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

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

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

“操作同步”功能(默认情况下启用)会将滚动位置,点击和表单输入从一个浏览器复制到所有其他连接的浏览器。 一些有用的链接:

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