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文件选项，该选项响应任何类型的事件并重新加载（）

示例：

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

Answer 2

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

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

Answer 3

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

** - 它的子目录; * - 目录中的文件

示例：

./**/*.html - 在扩展名为html
app/js/*.js - 在目录app/js中观看扩展名为js的所有文件

有关Browsersync options

的更多信息

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()
        },
    },
],

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

5 个答案: