There is no automatic page refresh with browser-sync. Why?

Question

gulp.js

Hello! There is no automatic page refresh with browser-sync. Moreover, the page opens in the browser, but when changes are made, it is not automatically updated. What could be the reason?

const gulp = require("gulp");
const browserSync = require("browser-sync");
const sass = require("gulp-sass");
const rename = require("gulp-rename");
const cleanCSS = require('gulp-clean-css');

// Static server
gulp.task("server", function () {
  browserSync.init({
    server: {
      baseDir: "src"
    },
    browser: 'chrome'
  });
});

gulp.task("styles", function () {
  return gulp.src("src/sass/*.+(scss|sass)")
    .pipe(sass({
      outputStyle: "compressed"
    }).on("error", sass.logError))
    .pipe(rename({
      prefix: "",
      suffix: ".min",
    }))
    .pipe(cleanCSS({compatibility: 'ie8'}))
    .pipe(gulp.dest("src/css"))
    .pipe(browserSync.stream());
});

gulp.task("watch", function () {
  gulp.watch("src/sass/*.+(scss|sass)", gulp.parallel("styles"));
  gulp.watch("/src/*.html").on("change", browserSync.reload);
});

gulp.task("default", gulp.parallel("watch", "server", "styles"));

Answer 1

1) var browserSync = require('browser-sync') .create();
2) In my opinion, watch().on() is from the 3rd gulp, and you obviously have the 4th here.
Take a closer look at the docks . Try to pass a separate task to watch for reload

Answer 2

Here is the solution that helped https://codepen.io/codepen-store/pen/gOYKmRw?edito...