Не работает обновление браузера в gulp?

Question

quiplunar @quiplunar

Не работает обновление браузера в gulp?

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

[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... но по факту перезагрузки нет((

Вот конфиг:

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