Почему 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, может, где-то ошибся?