browser-syn c не обновляет sh страницу из gulp - PullRequest
Новая
       87

browser-syn c не обновляет sh страницу из gulp

0 голосов
/ 09 мая 2020

browser-sync, используемый с gulp, не обновляет sh страницу в браузере даже для простой настройки.

Версии: gulp: 4.0.2, browser-sync: 2.26. 7, Chrome: 81.0.4044.138

Структура папки: 

|- src/
    |- index.html
|- dist

gulpfile.js: 

const { task, src, dest, series, watch } = require('gulp');
const browserSync = require('browser-sync').create();

task('html', () => {
    return src('src/*.html').pipe(dest('dist'));
});

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });
});

task(
    'watch',
    series(
        task('html'),
        (done) => {
            watch('src/*.html', task('html'));
            watch('dest/*.html').on('change', browserSync.reload);
            done();
        },
        task('browserSync')
    )
);

Когда я бегу gulp watch, src/index.html успешно копируется в dest/index.html и запускается browser-sync (Chrome открывает страницу и показывает мне «Browsersyn c connected» ).

Когда я вношу какие-либо изменения в src/index.html он копируется в dest/index.html, но browser-sync не обновляет sh страницу.

Я попытался заменить browserSync.reload на () => console.log('reloaded') внутри вызова watch('dist/*.html').on('change', ...), и Сообщение журнала успешно отображается каждый раз, когда я изменяю файл src/index.html (это означает, что наблюдатель работает правильно и вызывается browserSync.reload). Также попытался перезапустить Chrome.

Любая помощь или совет были бы очень признательны.

Обновление: оно начинает работать, если я помещаю watch('dist/*.html', browserSync.reload); в задачу browserSync (которая странно): 

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        }
    });

    watch('dist/*.html', browserSync.reload);
});

Другой вариант, который помогает, - это добавление свойства files, чтобы browser-sync создавал собственный наблюдатель файлов: 

task('browserSync', () => {
    browserSync.init({
        server: {
            baseDir: 'dist'
        },
        files: [ 'dist/*.html' ]
    });
});
...