问题标签 [gulp-browser-sync]

我希望 gulp 使用标志 --remote-debugging-port=9222 在 chrome 中启动浏览器同步，以便我可以通过 VS Code Chrome Devtools Extension 进行连接。

我的 gulp 文件（部分）如下所示：

gulp.task("browserSync", function () { browserSync.init({ server: { baseDir: "src" }, browser: "google chrome", }); });

失败的尝试

浏览器：“谷歌浏览器--remote-debugging-port=9222”

浏览器：“chrome.exe --remote-debugging-port=9222”

我正在使用 gulp。任务正在运行创建所需的文件夹。但是在浏览器中运行时出现Cannot GET/错误。我附上了我的项目结构的图像以及输出

吞咽

文件结构

问题（无法获取/）

我的 index.html 包含以下内容：

以下是我的 gulpfile.js

当我更改导入的文件时，网页会更新main.less，但导入的较少文件中的样式不会在已完成的 main.min.css 中更改

--gulpfile.js--

--main.less--

本质上，问题在于 BrowserSync 直到我第一次更改文件后才“同步”，因此第一次“刷新”不是免费的。

背景：

我正在建立一个非常简单的存储库，其中我们有一个 gulp 进程，它生成由 browserSync 提供的静态文件。Gulp 监视这些文件，当它们发生变化时会导致 browserSync 重新加载。

尽管索引页面看起来不错，但在您第一次更改监视文件并手动刷新浏览器之后，自动刷新才会起作用。

我通过查看 Chrome 开发人员工具中的网络选项卡确认了这一点，并且可以看到在第一次加载时，在我手动更改文件之前不存在 websocket。然后，在我刷新浏览器后，我可以看到一个正确的 websocket 正在运行。无论您在更改文件之前刷新页面多少次，websocket 都不会初始化。

我在 BrowserSync slack 中询问过，检查了他们的问题并阅读了源代码，但仍然无法弄清楚为什么会发生这种情况。

如果需要，我可以使用各种相关文件的相关部分更新问题：

• Dockerfile
• 码头工人-compose.yml
• gulpfule.js

我创建了一个截屏 gif，但整个内容大约是 20mb - 所以我没有上传它。

提前感谢您的帮助。

首次加载时终端中的 BrowserSync：

首次加载时的网络选项卡 -没有 websocket：

更改文件后：

第一次更改文件后的网络选项卡 -使用 websocket：

4刚刚从 Gulp迁移到 Gulp 3.9.1，虽然当我运行时gulp一切正常，它编译一切都很好，我可以很好地启动watch命令，所以它看起来像是在监视变化，每当发生变化时，它似乎无法捡起来。

这是我的watch任务：

browser-sync任务：

我在这里缺少的 Gulp 4 中是否还需要其他更改？

该脚本可以运行并刷新我的页面，并运行我设置的所有任务，但每次运行时它都会在我的终端中显示“您尝试启动 BrowserSync 两次”。

据我研究，原因应该是browserSync.reload我在gulp.watch任务中添加的，但是当我删除它时，它给了我“TypeError：无法将类调用为函数”。当我在 Github 上寻找其他设置 BrowserSync 的示例时，它们的编写方式都略有不同，因此我无法真正掌握语法。

这不是一个严重错误，但它是一个令人讨厌的警报。

内容

我使用Gulp + BrowserSync的Roots堆栈开发网站。

当我执行gulp watch时，最初，它会打开我的浏览器到https://localhost:300X并且我看到我正在处理的站点 - 正如预期的那样。

目标

当我保存CSS( SASS)、HTML或JS时PHP，Gulp 会编译并且 BrowserSync 会刷新页面。

问题

随着时间的推移（几个月），它现在几乎不会在保存PHP文件后刷新。它很少这样做HTML。截至本周，它有时只为CSS/这样做SASS。不过，还是刷新了JS一贯的。

有时手动刷新页面甚至不起作用。

我不知道为什么，也不知道如何解决。

我的理论

似乎 BrowserSync 正在缓存什么的。

进一步的背景

澄清：

• Gulp 中没有错误输出，它似乎执行正确。
• 如果我打开一个 SASS 文件并连续保存 10 次。有时会是大部分时间。其他时候只会出现几次。
• 我确实在两次保存之间给了它几秒钟，因为如果我快速保存，我已经看到它窒息。
• 这适用于现有文件。我没有测试过创建新文件。

我的 Gulp.js 文件

https://gist.github.com/s3w47m88/5b1511ef4f2bb3c458924642da818e9a

Link to Github repo: https://github.com/Greatshock/Netcracker-Study-Course/blob/f9bfb413929feec51064a78abf1450845f867186

I have a file named base.less, where all the styles are @import-ed. When I run the gulpfile (npm run dev), everything is being built, the browser opens the page. However, when I'm changing the content of one of the imported stylesheet, browsersync just writes in the console File event [change] : dist/base.css and nothing happens (even base.css does not actually change). Note that if I change base.less directly by writing some style in it, everything works fine.

Here is my gulpfile.js. Can anyone see the mistake?

有一段时间我对 Gulp 和 BrowserSync 有一个非常奇怪的问题。每次我更改css（有时甚至是HTML）时，我都意识到Gulp会更新浏览器，即使我没有保存也没有完成更改导致控制台错误每次我特别更改我的CSS文件以及HTML时，我一直在工作使用这个 gulp.js 配置已经有一段时间了，但它慢慢地到了无法流畅工作的地步。

同样时不时地但经常发生，当我在我的 style.scss 文件中正确导入所有内容时，我会遇到 SASS 导入错误。

也许我使用/调用 BrowserSync 的方式与我调用观看函数的那一刻有关？还是只是与我正在使用的 Gulp 版本相关的错误。任何帮助将不胜感激。

这是我当前的 gulp.js 文件：

问题 - 当我运行 gulp 时，出现以下消息：

[Browsersync] Couldn't open a browser (if you are using BrowserSync in a headless environment, you might want to set the open option to false)

gulpfile.js 代码：

我必须手动将 URL 输入到浏览器中，它适用于我当前的连接，但消息仍然存在。那么我该如何解决这个问题呢？任何帮助将不胜感激，谢谢

截图：

http://www.screencast.com/t/rZDYsPLvM1uv

http://www.screencast.com/t/6MMLk5gA

http://www.screencast.com/t/9EoNLhAlK

（注意：抱歉，经过多次尝试后超链接语法无法正常工作，这很奇怪。）

历史：

我之前的浏览器同步没有问题，我的 gulp 自动运行 - 直到现在。我想我今天有 Windows 10 64 位更新，这个问题就出来了。一切似乎正常，除了浏览器同步问题。

我尝试了这些链接，但似乎没有任何效果：

BrowserSync Gulp 无法在 Chrome 中打开

浏览器未使用 BrowserSync 或 live-server 启动