浏览器同步未重新加载文件事件添加/更改

Question

我在 webpack 中使用浏览器同步，因为构建中有一些文件 webpack 没有规则。出于某种原因，当我的图像文件被修改/添加/删除时，浏览器同步不会触发重新加载？

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

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

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

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

Answer 1

事实证明，我需要将自定义事件处理程序传递给 browserSync.init 文件选项，该选项使用 reload() 响应任何类型的事件

示例：

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

Answer 2

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

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

Answer 3

查看浏览器同步代码库后，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()
        },
    },
],

Answer 4

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

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

所以试试这个：

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

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

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

Answer 5

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

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

例子：

• ./**/*.html — 查看所有扩展名为 html 的子目录文件
• app/js/*.js — 在目录 app/js 中查看所有扩展名为 js 的文件

更多关于Browsersync options的信息