Почему browsersync.reload срабатывает только один раз?

Столкнулся с проблемой при работе в Gulp. Настроил Gulp для вёрстки PUG и SCSS. Всё компилируется и обновляется в браузере на лету, кроме одного. Приведу сначала свой gulpfile.js:

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const watch = require('gulp-watch');
const sass = require('gulp-sass')(require('sass'));
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const plumber = require('gulp-plumber');
const notify = require('gulp-notify');
const pug = require('gulp-pug');
const del = require('del');

// Таск для сборки PUG-файлов
gulp.task('pug', function(callback) {
    return gulp.src('./src/pug/pages/**/*.pug')
        .pipe(plumber({
            errorHandler: notify.onError(function(err) {
                return {
                    title: 'Pug',
                    sound: false,
                    message: err.message
                }
            })
        
        }))
        .pipe(pug({
            pretty: true
        }))
        .pipe(gulp.dest('./build/'))
        .pipe(browserSync.stream())
    callback()
});

// Таск для компиляции SCSS в CSS
gulp.task('scss', function(callback) {

    return gulp.src('./src/scss/main.scss')

        .pipe(plumber({
            errorHandler: notify.onError(function(err) {
                return {
                    title: 'Styles',
                    sound: false,
                    message: err.message
                }
            })
        
        }))

        .pipe(sourcemaps.init())
        .pipe(sass())
        .pipe(autoprefixer({
            overrideBrowserslist: ['last 4 versions']
        }))
        .pipe(sourcemaps.write())
        .pipe(gulp.dest('./build/css/'))
        .pipe(browserSync.stream())
    callback();
});

// Копирование изображений
gulp.task('copy:img', function() {
    return gulp.src('./src/img/**/*.*')
    .pipe(gulp.dest('./build/img/'))
    .pipe(browserSync.stream());
});

// Копирование скриптов
gulp.task('copy:js', function() {
    return gulp.src('./src/js/**/*.*')
    .pipe(gulp.dest('./build/js/'))
    .pipe(browserSync.stream()); 
});

// Слежение за изменением в файлах
gulp.task('watch', function(){
    gulp.watch('./build/js/**/*.js', gulp.parallel(browserSync.reload));
    gulp.watch('./build/img/**/*.*', gulp.parallel(browserSync.reload));
    gulp.watch('./src/scss/**/*.scss', gulp.parallel('scss'));
    gulp.watch('./src/pug/**/*.pug', gulp.parallel('pug'));
    gulp.watch('./src/img/**/*.*', gulp.parallel('copy:img'));
    gulp.watch('./src/js/**/*.js', gulp.parallel('copy:js'));
})

// Задача для старта сервера из папки app
gulp.task('server', function() {
    browserSync.init({
        server: {
            baseDir: "./build/"
        }
    });
});

// Очищаем папку build
gulp.task('clean:build', function() {
    return del('./build')
});

gulp.task(
    'default',
    gulp.series(
        gulp.parallel('clean:build'),
        gulp.parallel('pug', 'scss', 'copy:img', 'copy:js'),
        gulp.parallel('server', 'watch')
    )
);

Проблема возникает в задаче watch при мониторинге изменений в папке build/img. За это отвечает фрагмент gulp.watch('./build/img/**/*.*', gulp.parallel(browserSync.reload));

В терминале запускаю Gulp, стартует сервер, открывается вкладка браузера с проектом. К примеру, у меня уже есть картинка, которая присутствует в вёрстке и лежит в папке build/img. Если я эту картинку удалю, браузер перезагрузится и покажет вместо картинки текст аттрибута Alt. То есть, всё работает как надо, код gulp.watch('./build/img/**/*.*', gulp.parallel(browserSync.reload)); отследил изменение в папке build/img и обновил вкладку браузера.

А вот при последующих изменениях в папке build/img это перестаёт работать, хоть добавляй картинку, хоть удаляй снова - бесполезно, перезагрузки не происходит и нужно вручную нажимать F5.

В терминале при первом изменении папки build/img выводится сообщение, что происходит reloading..., при последующих изменения в терминале тишина.

В коде есть ещё одна аналогичная задача для js-скриптов в папке build/js, но его я не тестировал. Полагаю, что он также будет работать только один раз.

Все остальные watch работают как и должны.

На практике не так уж и необходимо постоянно мониторить папку build и можно этот кусок кода вообще выбросить. Но мне хочется разобраться, в чём всё-таки дело.

Что я сделал не так? Может, не до конца понимаю, как должен работать browsersync.reload, может, где-то ошибся?


Ответы (0 шт):