Browser refresh not working in gulp?

Question

JavaScript

Everything works fine, it is assembled, the files are being monitored, and when manually updating the content is updated.
But the browser does not want to update automatically, although it says in the console that the reboot was:

[22:10:29] Starting 'hbs'...
[Browsersync] 1 file changed (index.html)
[22:10:29] Finished 'hbs' after 212 ms
[Browsersync] Reloading Browsers...

[Browsersync] Reloading Browsers...but in fact there is no reboot ((

Here is the config:

spoiler

const del = require('del')
const gulp = require('gulp')
const glob = require('glob')
const sass = require('gulp-sass')
const {src, dest} = require('gulp')
const rename = require('gulp-rename')
const flatten = require('gulp-flatten')
const handlebars = require('gulp-compile-handlebars')
const tildeImporter = require('node-sass-tilde-importer')
const autoprefixer = require('gulp-autoprefixer')
const groupMedia = require('gulp-group-css-media-queries')
const sourcemaps = require('gulp-sourcemaps')
const imagemin = require('gulp-imagemin')
const webpack = require('webpack')
const webpackStream = require('webpack-stream')
const {TsconfigPathsPlugin} = require('tsconfig-paths-webpack-plugin')
const browserSync = require('browser-sync').create()

function browser() {
  browserSync.init({
    server: {
      baseDir: './dist/'
    },
    port: 3000
  })
}

function hbs() {
  const options = {
    compile: {
      noEscape: true
    },
    batch : [
      ...glob.sync('./src/components/*').map($glob => $glob),
      ...glob.sync('./src/pages/*').map($glob => $glob)
    ],
  }

  return src('./src/pages/*/[!_]*.hbs')
    .pipe(handlebars(null, options))
    .pipe(flatten({includeParents: 0}))
    .pipe(rename(path => path.extname = '.html'))
    .pipe(dest('./dist'))
    .pipe(browserSync.stream())
}

function scss() {
  const optSass = {
    outputStyle: 'expanded',
    includePaths: ['./src'],
    importer: tildeImporter
  }

  const optAutoprefixer = {
    cascade: false
  }

  return src('./src/static/styles/styles.scss')
    .pipe(sourcemaps.init())
      .pipe(sass(optSass).on('error', sass.logError))
      .pipe(groupMedia())
      .pipe(autoprefixer(optAutoprefixer))
    .pipe(sourcemaps.write('/'))
    .pipe(dest('./dist/css'))
    .pipe(browserSync.stream())
}

function ts() {
  return src('./src/static/typescript/main.ts')
    .pipe(webpackStream(webpackConfig(), webpack))
    .pipe(dest('./dist/js'))
    .pipe(browserSync.stream())
}

function assets() {
  const options = [
    imagemin.mozjpeg({ progressive: true }),
    imagemin.optipng({ optimizationLevel: 3 }),
  ]

  return src('./src/assets/**')
    .pipe(imagemin(options))
    .pipe(dest('./dist/assets'))
    .pipe(browserSync.stream())
}

function misc() {
  return src('./src/static/misc/**')
    .pipe(dest('./dist'))
    .pipe(browserSync.stream())
}

function clean() {
  return del('./dist')
}

function webpackConfig() {
  return {
    mode: 'development',
    output: {
      filename: 'main.js'
    },
    module: {
      rules: [
        {
          test: /\.ts$/,
          use: ['babel-loader']
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.js'],
      plugins: [
        new TsconfigPathsPlugin({configFile: 'tsconfig.json'})
      ]
    },
    devtool: 'source-map',
    target: 'web'
  }
}

function watchFiles() {
  gulp.watch([
    './src/pages/*/*.hbs',
    './src/components/*/*.hbs'], hbs)

  gulp.watch([
    './src/pages/*/*.scss',
    './src/components/*/*.scss',
    './src/static/styles/styles.scss'], scss)

  gulp.watch([
    './src/pages/*/*.ts',
    './src/components/*/*.ts',
    './src/static/typescript/main.ts'], ts)

  gulp.watch([
    './src/assets/**'
  ], assets)

  gulp.watch([
    './src/static/misc/**'
  ], misc)
}

const build = gulp.series(clean, gulp.parallel(hbs, scss, ts, assets, misc))
const server = gulp.parallel(build, watchFiles, browser)

exports.server = server
exports.build = build

Answer 1

Check your default browser