Почему зависает browserSync при изменении в файлах?

Question

[evg34rozenber]

Недавно решил научиться делать свои сборки gulp. В проекте использую pug, webpack, sass и в конечном итоге решил подключить browserSync.
Изначально ничего не отслеживалось, потом, все таки, добился этого(во всех файлах с тасками прописал в конце .pipe(browsersync.stream())), но страница не перезагружать при изменениях. В конечном итоге пришла идея прописать все в таске сервера
Вот код:

const gulp = require('gulp');
const browsersync = require('browser-sync').create();


module.exports = function browserSync(params) {
    browsersync.init({
        server:{
            baseDir: "build"
        }, 
        port : 3000,
        notify: false,
        open: true,
        cors: true
    })
    gulp.watch('#src/img/**/*.{jpg,png,svg,ico,gif,webp}').on('change', browsersync.reload);
    gulp.watch("#src/js/**/*.js").on('change', browsersync.reload);
    gulp.watch("#src/sass/**/*.sass").on('change', browsersync.reload);
    gulp.watch("#src/**/*.pug").on('change', browsersync.reload);
}

На этот раз страница, при изменениях в файлах начинает перезагружаться, но browserSync виснет и не идет дальше фразы в консоли [Browsersync] Reloading Browsers...

Если продолжать дальше изменять файлы, тогда количество этих фраз будет только увеличиваться в консоли, но перезагрузка так и не произойдет

Как это исправить?

Answer 1

[Сергей delphinpro]

gulp.watch("#src/sass/**/*.sass").on('change', browsersync.reload);

watch должен запускать задачу, а не перегружать страницу.
А в конце задачи должен быть вызов браузер синка.
примерно так:

gulp.watch("#src/sass/**/*.sass").on('change', sassTask);
и в задаче sassTask
.pipe(browsersync.stream()))

stream — не перезагружает страницу, а обновляет код в открытой. По моим наблюдениям это работает только со стилями. В js и других тасках лучше использовать .reload