问题标签 [browser-sync]

我正在尝试为 .NET MVC 应用程序设置一个 gulp 浏览器同步构建系统，除了在进行更改时使用浏览器同步进行实时重新加载之外，一切正常。这是我第一次尝试，所以我可能会做一些简单的错误。这是我的 gulpfile.js

当我运行时gulp watch工作正常，因为这些行已记录到控制台，只是没有实时重新加载。我已经弄坏了很多博客文章无济于事，有什么想法吗？

编辑：Browser-Sync 从代理启动站点，只要我在列出的目录中更改 CSS 或 JS 文件，gulp watch 就会启动它，但 Browser-Sync 不会。我必须手动刷新

几天来，我一直在尝试用 broswersync 解决这个问题。对此的任何帮助将不胜感激。

我的环境：

我在 Windows 上，我在 Ubuntu 上的服务器在一个流浪者的盒子里。我开启了端口转发，并使用端口 3000 映射到我的 vagrant 上的端口 3000。所以我从主机使用的 URL 是http://localhost:3000/index.html，如果来自外部，那么http://MY_IP_ADDRESS:3000/index.html

描述：

我有 CSS 注入、重新加载、表单同步、点击，可以在所有浏览器和设备上工作。不起作用的是同步滚动，下面是场景。

1. 滚动同步仅适用于 chrome，在桌面模式下，即，如果我在桌面模式下的多个窗口中的 chrome 中打开相同的 URL，它可以正常工作。
2. 如果我打开移动模式，在 chrome 和桌面模式下，滚动同步不起作用。
3. 如果我在 firefox、safari、IE 上打开链接，滚动同步在它们之间不起作用。
4. 我无法通过在多个设备上打开链接来滚动浏览不同的设备和浏览器。

我的咕噜：

我在 Windows 上工作，但我的服务器在 vagrant/ubuntu 上。这是我用于浏览器同步和观看的 Gulp 配置。

提前感谢您的帮助..

我正在尝试弄清楚如何将浏览器同步与 gulp 和 less 结合使用，以使浏览器在编译后在较少文件的更改时自动更新。我现在所得到的是导致系统中似乎重新加载并显示消息“已连接到浏览器同步”，但我没有看到浏览器中发生更改。在禁用缓存的完整手动重新加载中，我看到了预期的更改，因此 css / less 任务似乎部分工作，但我在浏览器同步上遗漏了一些东西。

哦，我在主 .less 文件中使用 @import 语句来为每个单独的模块提取更少的文件。感谢您的时间和帮助！

我找不到在 cloud9.io 中设置 gulp browsersync 的说明。我认为 browsersync 的设置 ip 和 host 是错误的。我尝试在我的 gulpfile.coffee 中这样做：

当我运行命令'gulp'时：

我做错了什么？请帮助并为我糟糕的英语感到抱歉。

我正在使用 gulp 编译一些 .less 文件并通过实时重载将更改注入浏览器。

这是我最初创建的任务：

我创建了另一个 gulp 任务来执行相同的任务，但使用 browser-sync 而不是 live-reload 进行交叉测试：

然后，我尝试编译这两个文件，以便能够根据我是在进行本地开发还是测试来运行任一任务。我创建了一个“less”任务来编译 css，一个“lrl”实时重新加载监视任务和一个“bs”浏览器同​​步监视任务。我创建了“less”任务来删除重复，但是现在当我更改 css 时，浏览器会重新加载所有内容，而不仅仅是注入 css。

我对在任务中调用任务的方式有点困惑。有没有办法确保注入 css，以这种方式进行设计要快得多。

非常感谢

=================== 大编辑 ============================

我一直在搞乱运行序列，但我仍然有同样的问题。在某种程度上，这项任务正在发挥作用。使用默认任务，我只能在本地服务器上实时重新加载。有了gulp serve一个服务器，我可以跨浏览器和设备调试我的布局。问题是我不再获得 css 注入。看起来 gulp 一直在重新运行所有任务并刷新浏览器以重新连接它。

所以我用重复的代码制作了一个工作版本，以使我想要实现的目标更清晰

当我这样做时，它工作顺利。但我想避免“less-lrl”和“less-bs”任务的代码重复。唯一不同的是.pipe(livereload());和.pipe(reload({stream: true}))

我脑子里有一些愚蠢的事情，我不明白:)

在让 Grunt 的浏览器同步插件正常工作时，我遇到了一些令人困惑的问题。我已经彻底阅读了文档并遵循了示例，但有几件事不起作用：
1）我没有得到任何 CSS 注入。我知道我在监视任务旁边运行插件，但是我已经watchTask: true设置并且我的终端显示 bS 正在识别我的 CSS 的更改，它只是没有重新加载浏览器。
2）鬼模式选项似乎都不适合我。我已将它们全部设置为 true，但是，就像 livereload 功能一样，我无法使其工作。

这是我当前的 Gruntfile：

任何帮助将非常感激

运行 gulp 后，我几乎立即收到消息“与 BrowserSync 断开连接”。这是我的 gulpfile.js

每隔一段时间，它就会正常工作，但永远不会超过 30 秒。CLI 就像一切仍在正常工作一样。它不显示任何错误并通知我文件更改。

其他人遇到过这个问题吗？

运行 gulp serve 会导致以下错误：

它仅在运行浏览器同步时出现，这是我的浏览器同步配置：

我正在运行以下版本：

节点：0.10.33 gulp：3.8.10 浏览器同步：1.8.2（也尝试过 1.9.x）

startpath 正确且存在，禁用 ghostMode 无济于事。

我的 gulpfile.js 看起来像这样：

即使我已经排除了 node_modules，它也在尝试向所有 node_modules 添加一个监视。

怎么能排除呢？

请注意 node_modules 不存在于项目的根目录中，感染它位于项目的根目录之上，那么为什么还要麻烦包含相同的内容呢？

拿文件assets/css/main.css，撒上 RewriteRule，现在你可以拥有：

问题是，BrowserSync 不能再将 URL“映射”到文件，并且 CSS 注入失败。浏览文档并没有发现任何问题，想知道是否有人遇到过类似的情况？典型的 gulp 设置：