问题标签 [browser-sync]

最近从 Grunt.js 切换到 Gulp.js，因为很多人告诉我它有多好和多快（这是真的！）。我已将BrowserSync添加到我的 Gulpfile.js 中，从而更容易在多个设备上进行测试。它工作得很好，而且设置简单。就上下文而言，我用 95% 的工作时间开发 WordPress 站点，并在启用多站点的 Apache 虚拟主机上运行它们，并为每个客户端设置许多本地子域，例如 site1.domain.dev、site2 .domain.dev 等。这很好用，我已经这样做了几年了。但是，因为 BrowserSync 需要为我的站点创建一个代理以便它能够同步和注入 CSS，所以当前通过 BrowserSync 运行的站点被路由到http://localhost:3000. 这很好，我理解它为什么需要发生，但它与 WordPress 有点混淆（因为 URL 不一样等），而且我是一个大的 TypeKit/Cloud 字体用户，这意味着因为该网站是被路由到本地主机，没有加载任何字体。当然，我可以http://localhost:3000在 TypeKit 上为每个站点添加域列表，但这感觉像是一种解决方法，我想知道是否有更好的方法来做到这一点。

我在 Gulpfile.js 的 BrowserSync 部分中添加了：

所以我的问题是，BrowserSync 是否可以直接访问我的 URL ( http://site1.domain.dev ) 而不是路由它http://localhost:3000？作为额外的奖励，如果可以从 BrowserSync 代理属性中删除域，那就太棒了，因为我使用自动化脚本在我的 WP Multisite 安装上设置一个新站点，并且真的不想编辑我的 gulpfile每次我建立一个新网站。

谢谢您的帮助！:)

我最初尝试设置 BrowserSync 来代理我当前的 .dev 站点。
我有以下问题：

• 页面加载非常非常慢。

• 在 Firefox（但不是 Safari）中，当我单击任何链接时，当前页面将重新加载，而不是跟随链接。

然后我改为手动嵌入代码段。不理想，但它解决了速度问题——有趣的是，它似乎也部分解决了导航阻塞问题。

现在它只阻塞了大约一半的时间。在我看来，如果页面加载时间少于半秒左右，那很好，但如果超过该时间，BrowserSync 会停止它并重新加载当前页面。
（这解释了为什么禁用代理会部分修复它，因为代理页面总是需要大约 20 秒才能加载。）

我已经在普通的 Firefox 34 和相当干净的 Firefox Dev Edition 36 安装中尝试过这个，几乎没有安装扩展。（我禁用了 LiveReload 扩展，以防引起问题。事实并非如此。）
正如我所提到的，它在同一台机器上的 Safari 中运行良好......这看起来很奇怪。

我正在通过 gulp 运行 BrowserSync。

gulpfile.js（为清楚起见省略了一些不相关的部分）：

我正在使用浏览器同步 grunt 插件并且它正在工作，但是与实时重新加载相比它非常慢。

保存文件后，浏览器开始刷新页面大约需要 3 秒。我不确定这是否是浏览器同步、我的本地主机的问题，还是这是浏览器同步的典型行为？

我有一个 Gulp 任务设置来使用指南针编译 .scss 文件，还有另一个正在运行的任务，它通过 BrowserSync 将更改的 CSS 注入浏览器。

我发现的问题是，当 compass 运行时，我得到如下代码段中的输出：

即使文件main.css没有改变，但 compass 莫名其妙地碰到了它，让 BrowserSync 认为它已经改变了，这意味着即使只有一个文件发生了变化，整个 CSS 文件集也会重新注入到浏览器中。

有没有办法让相同/未更改的 *.css 文件保持不变，以便 BrowserSync 只能加载实际更改的文件？

我们有很多文件，使整个过程非常缓慢。

我有这段代码可以通过任何更改重新加载浏览器：

我在这里通过 html.js 触发 browserSync：

出于某种原因，html.js 似乎可以工作（文件包含、重命名等......已完成）但 browserSync 没有。我没有收到任何错误消息，但浏览器不会自动重新加载。有任何想法吗？

谢谢！

看起来 BrowserSync 脚本被注入到除根 index.html 文件之外的所有文件中（因此，根据需要重新加载所有页面）。

每当我编辑和保存 /index.html 时，CLI 都会输出我期望的内容：

…但是加载了根 index.html 文件的浏览器什么也没做。

但是，如果我在浏览器中导航到不同的 html 文件，我会看到 BS 脚本被注入其中，并且对该文件中代码的任何后续调整都会导致自动刷新。

关于为什么 root 的 index.html 文件没有将 BS 脚本注入其中的任何想法？

我的 Gulp 文件：

我使用此命令由 browsersync/node 服务器运行：

我得到的结果是（我在网上的任何地方都找不到）：

我不知道应该从哪里开始诊断这个问题。有人有什么建议吗？

browser-sync 1.9.0 节点版本 v0.10.35 OS X Yosemite 10.10.1

我已经使用BrowserSync为我的项目编写了一个监视任务，但我遇到了一个我似乎无法弄清楚的障碍。该任务并不太疯狂，监视文件然后重新加载浏览器并根据需要编译 sass 或 js(browserify)。

问题是当我保存一个 js 文件时（比如，app.js）它会刷新浏览器，然后编译 js 并创建bundle.js文件，然后还会触发浏览器刷新。所以我总是得到至少 2 次刷新。有时它甚至会循环刷新 10-15 次。

对我来说最完美的是能够禁用自动刷新并自己触发它，这样我就可以保持我的逻辑进行编译，然后在过程完成后我可以触发浏览器刷新。

BrowserSync 有一种触发刷新的方法，但是我怎样才能阻止默认刷新的发生呢？

下面包含的 Js，还请注意我不想包含更多的模块，如 watchify 或任何东西。

我的主要目标是调整 Yeoman 的gulp-webapp开发工作流程以运行 PHP。

具体来说，如果可能的话，我希望能够使用gulp-php-connect多个基本目录（对于从 Sass 编译的 CSS）和路由（对于 Bower 依赖项）。

我可以使用gulp-connect-php插件通过 Gulp 运行 PHP，如下所示：

但是，我想利用 gulp-webapp 优秀但非常复杂的开发工作流架构，它依赖于 BrowserSync、Sass 编译器（编译为 .css 文件到 .tmp 文件夹中，用于开发）、自动前缀和使用一堆其他有用的插件。

这是我想适应使用gulp-connect-php或任何其他 PHP 的部分：

BrowserSync 有一个代理选项，它允许我使用gulp-connect-php服务器运行它，这非常了不起。但我需要gulp-connect-php它来使用多个基本目录和路由，就像BrowserSync一样。

到目前为止，我想出了这个：

为了临时解决多个基本目录问题，我调整了styles任务，以便将编译后的 .css 存储到/app而不是.tmp/. 不过，我更喜欢将它放在临时文件夹中，因为我不需要那个已编译的 .css 文件与我的 Sass 文件一起挂在那里。

对于路线问题，我试图告诉wiredep插件更改路径，例如 from bower_components/jquery/dist/jquery.jsto ../bower_components/jquery/dist/jquery.js，但没有成功。

我所能做的就是手动重命名 index.php 中的路径，但它仍然不起作用。跑步时gulp serve我得到：

/bower_components/jquery/dist/modernizr.js - No such file or directory

...即使我将 index.html 中的路径更改为../bower_components/jquery/dist/jquery.js.

我相信这不起作用，因为gulp-connect-php服务器无法看到基本文件夹之外的内容。

我正在尝试不同的事情，虽然我对这个线程的标题很模糊，但我认为最干净的解决方案是运行多个基本目录和路由gulp-connect-php，但我不知道这是否可能。

我是 grunt 的新手，并且正在使用 BrowserSync 碰壁。我是尝试全局安装还是为特定文件夹安装

或者

我得到了同样的错误：npm ERR! cb<> never called!我已经尝试npm cache clear删除 node_modules 文件夹并npm install再次运行，但似乎没有任何帮助。

Watch、Compass 和 Uglify 都在工作。我只是无法让 browserSync 成功安装。

这是我刚刚输入的命令和结果的复制/粘贴。

请指教。

按照下面的 sskips 建议，我收到以下错误：