浏览器同步未重新加载文件事件 add/change

Question

我正在使用浏览器与 webpack 同步，因为构建中有一些文件 webpack 没有规则。出于某种原因，当我的图像文件为 modified/added/removed?

时，浏览器同步不会触发重新加载

在终端中记录 [BS] File event [add] : image.png 和 [BS] File event [change] : image.png

但与我编辑 .html 文件时不同，它没有说 [BS] Reloading Browsers...

这是我的浏览器同步初始化：

browserSync.init({ files: ['./**.html', './**.png'] });

Answer 1

如果你想观看当前目录中的所有 HTML 个文件，请使用 ./*.html 或 *.html

** — 这是子目录； * — 目录中的文件

示例：

./**/*.html — 在扩展名为 html
app/js/*.js — 观看目录 app/js 中扩展名为 js

有关 Browsersync options

的更多信息

Answer 2

原来我需要将自定义事件处理程序传递给 browserSync.init 文件选项，它使用 reload()

响应任何类型的事件

示例：

browserSync.init({
        files: [
            {
                match: ['./img/**'],
                fn:    function (event, file) {
                    this.reload()
                }
            }
        ]
    })

Answer 3

默认情况下 BroswerSync 仅侦听 change 事件。可以更改 watchEvents 选项以侦听 adding 文件。添加add、unlink、addDir和unlinkDir监听文件和目录的添加和删除。

browserSync.init({
    files       : [ './img/**' ]
    watchEvents : [ 'change', 'add', 'unlink', 'addDir', 'unlinkDir' ]
});

Answer 4

我遇到了同样的问题，对我有用的解决方案是 injectChanges:false

检查文档页面：https://www.browsersync.io/docs/options#option-injectChanges

所以试试这个：

browserSync.init({
  injectChanges: false,
  files: ['./**.html', './**.png']
});

of 对于那些使用 Laravel Mix（就像我一样）的人：

mix.browserSync({
  injectChanges: false,
  files: ['./**.html', './**.png']
});

Answer 5

查看浏览器同步代码库后，BS 将执行页面刷新（又名浏览器重新加载）或注入文件更改。 BS对以下扩展名的文件进行注入："css"、"gif"、"jpg"、"jpeg"、"png"、"svg"、"webp", "map".

如果要对所有文件类型禁用代码注入，请将 injectChanges 配置设置为 false。或者添加 --no-inject-changes 命令行标志。此选项将关闭所有文件类型的注入。

如果您仍想允许对上面列出的文件类型的子集进行代码注入，请删除 injectChanges 配置或将其设置为 false。另外，删除 --no-inject-changes 如果设置。然后在 files 数组中为需要浏览器重新加载的文件添加条目。例如：

files: [
    {
        match: ['./img/**'],
        fn:    function (event, file) {
            this.reload()
        },
    },
],

浏览器同步未重新加载文件事件 add/change

Browser-sync not reloading for file event add/change

javascript

node.js

webpack

browser-sync