Синхронизация браузера не перезагружается при добавлении / изменении события файла

Question

Я использую браузер-синхронизацию с веб-пакетом, поскольку в сборке есть файлы, для которых в веб-пакете нет правил. Почему-то браузерная синхронизация не вызывает перезагрузки, когда мои файлы изображений изменены / добавлены / удалены?

В терминале его логирование [BS] File event [add] : image.png а также[BS] File event [change] : image.png

Но в отличие от меня, когда я редактирую.html файл, он не говорит [BS] Reloading Browsers...

Это мой init-sync для браузера:

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

Answer 1

Оказывается, мне нужно было передать пользовательский обработчик событий в опцию files browserSync.init, который отвечал на любые события с помощью reload().

пример:

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

Answer 2

После просмотра базы кода синхронизации браузера BS либо выполнит обновление страницы (также известное как перезагрузка браузера), либо внесет изменения в файл. BS выполняет инъекцию для файлов со следующими расширениями: "css", "gif", "jpg", "jpeg", "png", "svg", "webp", "map".

Если вы хотите отключить внедрение кода для всех типов файлов, установите injectChangesconfig в false. Или добавьте--no-inject-changesфлаг командной строки. Эта опция отключит внедрение для всех типов файлов.

Если вы по-прежнему хотите разрешить внедрение кода для подмножества типов файлов, перечисленных выше, удалите injectChangesconfig или установите для него значение false. Также удалите--no-inject-changesесли установлен. Затем добавьте записи вfilesмассив файлов, требующих перезагрузки браузера. Например:

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

Answer 3

По умолчанию BroswerSync прослушивает только change События. watchEvents опция может быть изменена для прослушивания add составление файлов. добавлять add, unlink, addDir а также unlinkDir прослушивать добавление и удаление файлов и каталогов.

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

Answer 4

У меня была та же проблема, и решение, которое сработало для меня, injectChanges:false

Проверьте страницу документации: https://www.browsersync.io/docs/options

так что попробуйте это:

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

of для тех, кто использует Laravel Mix (как и я):

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

Answer 5

Если вы хотите посмотреть все файлы HTML в текущем каталоге использования ./*.html или же *.html

** - это подкаталог; * - это файлы в каталоге

Примеры:

• ./**/*.html - смотреть во всех подкаталогах файлы с расширением html
• app/js/*.js - смотреть в каталоге app/js все файлы с расширением js

Подробнее о параметрах Browsersync