Why doesn't browsesSync refresh the browser after changes?

Question

gulp.js

'use strict';
 
const gulp = require('gulp');
const sass = require('gulp-sass');
const pug = require('gulp-pug');
const del = require('del');
const autoprefixer = require('gulp-autoprefixer');
const browserSync = require('browser-sync').create();


//КОМПИЛЯЦИЯ SASS ФАЙЛОВ
gulp.task('sass', function() {
    return gulp.src('src/work/sass/**/*.scss', {since: gulp.lastRun('sass')})
      .pipe(autoprefixer())
      .pipe(sass())
      .pipe(gulp.dest('src/static/css'));
  }
);

//КОМПИЛЯЦИЯ PUG ФАЙЛОВ
gulp.task('pug', function() {
    return gulp.src('src/work/pug/index.pug')
      .pipe(pug({pretty: true}))
      .pipe(gulp.dest('src/static'));
  }
);

//ОТПРАВКА ИЗМЕНЕННЫХ ФАЙЛОВ ИЗ "SRC/STATIC" -> PRODACTION
gulp.task('static', function() {
  return gulp.src('src/static/**')
    .pipe(gulp.dest('dist'));
})

//ОЧИСТКА PRODACTION
gulp.task('clean', function() {
  return del('dist');
});

//ПОЛНАЯ СБОРКА ПРОЕКТА
gulp.task('build', gulp.series(
  'clean',
  gulp.parallel('pug', 'sass', 'static'))
);

gulp.task('watch', function() {
  gulp.watch('src/work/pug/index.pug', gulp.series('pug'));
  gulp.watch('src/work/sass/**/*.*', gulp.series('sass'));
  gulp.watch('src/static/**/*.*', gulp.series('static'));
});

gulp.task('serve', function() {
  browserSync.init({
    server: 'dist'
  });

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

gulp.task('dev', 
  gulp.series('build', gulp.parallel('watch', 'serve'))
);

Answer 1

there is no answer on the internet yet, rolled back to version 2.14.0