问题标签 [browser-sync]

我在我的 gulpfile.js 中尝试了几种不同的方法，以使 HTML 自动重新加载以在 Gulp 中与BrowserSync（不是 LiveReload）一起使用，但没有一个奏效。我认为最后一次尝试可以解决问题，但它也不起作用。我错过了什么？

这是我的整个 gulpfile.js：

我很想使用BrowserSync进行开发。但是，页面加载（不仅在更改后重新加载）非常慢。

我使用proxy模式。在没有 BrowserSync 的情况下浏览页面应该很快。

一个原因可能是我安装 BrowserSync 时出现以下错误：

我从头开始安装节点（使用brew和包安装程序），但无法摆脱错误。

此外，BrowserSync 是使用 Gulp 运行还是通过命令行运行也没有什么区别。

任何的想法？

上周我尝试为一个小型 javascript 项目从头开始编写 gulpfile。我选择使用 BrowserSync 来编译我的代码并重新加载浏览器（Chrome）。整个周末都运行良好，我完成了。然而，我觉得我昨天打开了这个项目，现在当我运行“gulp”命令时，它没有连接到浏览器，给出“连接到 BrowserSync”消息，并提供自动重新加载功能。但是在控制台中，我仍然会收到通知我的文件正在更新和编译。

有谁知道这怎么会发生？

这是我正在使用的 gulpfile：

感谢您的任何建议！

我正在尝试使用 gulp 和浏览器同步重定向我的 API 请求：

但是当调用被发送到 API 时，我得到了这个响应：

知道我做错了什么吗？

我快要开始grunt-browser-sync工作了，但还没有完成。

我想出了这个 Gruntfile：

我想要的是以下内容：

1. grunt watch在终端上键入并自动index.html在我的浏览器上的静态服务器页面中打开我的。
2. 当 CSS、JS 或图像更改时实时重新加载的页面。

我的配置会发生以下情况：

1. 仅当我保存文件时才会打开新的浏览器窗口
2. 每次我保存一些东西时，都会打开多个浏览器窗口，并且localhost数字不断变化，使插件完全没用

我知道我已经在文件的每个可能的地方注册了，但这是 browser-sync做某事tasks : ['browserSync']的唯一方式。我希望这已经足够了：

grunt.registerTask('newer', ['browserSync', 'sass', 'autoprefixer', 'concat', 'uglify']);

但我没有运气。浏览器同步触发，但没有打开静态服务器。

I'm building a basic React/Flux application and using react-router-component for the routing, browser-sync for live reload on build changes, and browserify for dependency injection.

The problem that I have is that when the live reload or any reload occurs on a path that isn't / (i.e. /profile, /gallery, etc...), I get an error message of Cannot GET /path (or any route for that matter).

I suspect that this has something to do with the fact that it's a single page application and all routing is done on the client.

Here is my browser-sync setup (it's very basic). I think that I might need to add some middleware, but I'm not sure what to actually put in the middleware.

我一直在使用nitrous.io 虚拟盒，构建一个包含browsersync.io的 gulp 任务。我已经能够通过 gulp 安装和实例化浏览器同步，但我无法获得有效的代理地址。

这是我的 gulp.js 文件的截断版本：

Nitrous 很友好地发布了这个演示，实时重载：http ://help.nitrous.io/setting-up-gulp-with-livereload-and-sass/ ，他们将实时重载端口设置为4002 因为他们为 HTTP 分配端口的方式。不管我为无法解析的浏览器同步获取本地主机地址。这是一些示例输出：

从上面，我可以看到端口没有得到尊重，但无论如何，这些地址仅适用于 localhost 类型的环境。谁能指出我正确的方向？

补充

进一步挖掘，我已经阅读了来自 nitrous http://help.nitrous.io/faq-localhost/的文档 ，因此我对盒子内的端口分配和转发有了更多的了解。我的 gulp 文件现在如下所示：

假脱机后 gulp 的响应gulp browser-sync是相同的，但现在如果我将浏览器定向到XXXXXX-XXXXXX.euw1.nitrousbox.com:3001/XXXXXXX/我会得到一个响应Cannot GET /XXXXXXX/，我认为它来自node.js。我相信这意味着浏览器同步服务器没有正确地假脱机。

这是我的gulpfile.coffee：

它使用 BrowserSync 来监视某些文件并重新加载浏览器。

它目前设计用于处理静态文件。

我已经开始使用静态站点生成器 Middleman。Middleman 运行一个开发网络服务器，它从源代码呈现生成的网页。

我能够修改上述 Gulpfile 以便 BrowserSync 代理到中间人而不是提供静态文件。

我很难弄清楚的是如何让 Gulp 在后台启动 Middleman。

要求：

• 中间人应该在后台启动之前gulp.watch（最后一行）。
• Middleman 应该与 Gulp 并行运行。IE。Gulp 不应该等待 Middleman 完成。
• 中间人应该打印到终端（正常消息和错误）。
• 终止时应gulp watch终止中间人。
• 当中间人终止时，Gulp 应该终止，这样我就可以在解决导致中间人终止的问题后重新启动中间人。

运行 Middleman 的命令是bundle exec middleman server.

我已经将我的 grunt 插件拆分为它们自己的文件，并且我正在使用 load-grunt-config ( https://github.com/firstandthird/load-grunt-config ) 来调用它们：

我有 sass、autoprefixer、cssmin 和 watch 任务，但我也在使用 Browsersync 和 px-to-rem 这两个插件返回：

和

当单独调用或作为更大任务的一部分调用时。

我已经遵循了这两个插件的separate.js 文件的语法，所以我很茫然。例如运行 grunt 时调用的 remify.js 文件是这样写的

有什么想法会出错吗？

我还设置了示例代码的要点，包括 package.json 和 aliases.yml

https://gist.github.com/sturobson/f88258fd010e901e24d9

我的配置完成了它应该做的一切，但它从不刷新浏览器。一旦我手动刷新它，就会有变化。我正在连接到默认的 localhost:3000。任何想法为什么会这样或如何调试它？

gulpfile.js：

控制台输出示例：