Why does browserSync freeze when changing files?

Question

gulp.js

I recently decided to learn how to make my own gulp builds. In the project I use pug, webpack, sass and eventually decided to include browserSync.
Initially, nothing was tracked, then, after all, I achieved this (in all files with tasks, I registered .pipe (browsersync.stream ())) at the end, but the page does not reload when changes are made. In the end, the idea came to register everything in the server task.
Here is the code:

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);
}

This time, the page starts reloading when files are changed, but browserSync hangs and does not go beyond the phrase in the console [Browsersync] Reloading Browsers...

If you continue to change files, then the number of these phrases will only increase in the console, but the reload will will not happen

How to fix it?

Answer 1

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

watch should run the task, not reload the page.
And at the end of the task there should be a call to the sync browser.
something like this:
gulp.watch("#src/sass/**/*.sass").on('change', sassTask);
and in the task sassTask
.pipe(browsersync.stream()))
stream - does not reload the page, but updates the code in the open one. According to my observations, this only works with styles. In js and other tasks it is better to use .reload