Why doesn't browser-sync refresh the page?

Question

JavaScript

Hello.

For some reason, browsersync does not update the page when changing styles Styles
task:

function styles() {
  return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`])
    .pipe(eval(`${preprocessor}glob`)())
    .pipe(eval(preprocessor)())
    .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
    .pipe(cleancss({ level: { 1: { specialComments: 0 } }, format: 'beautify'  }))
    .pipe(rename({ suffix: ".min" }))
    .pipe(dest('app/css'))
    .pipe(browserSync.stream())
}

Task watcher:

function startwatch() {
  watch(`app/${preprocessor}/**/*`, { usePolling: true }, styles)
  watch(['app/js/**/*.js', '!app/js/**/*.min.js'], { usePolling: true }, scripts)
  watch('app/img/src/**/*.{jpg,jpeg,png,webp,svg,gif}', { usePolling: true }, images)
  watch(`app/**/*.{${fileswatch}}`, { usePolling: true }).on('change', browserSync.reload)
}

Whole gallp file:

spoiler

let preprocessor = 'less', // Preprocessor (sass, less, styl); 'sass' also work with the Scss syntax in blocks/ folder.
    fileswatch   = 'html,htm,txt,json,md,woff2' // List of files extensions for watching & hard reload

const { src, dest, parallel, series, watch } = require('gulp')
const python       = require('browser-sync').create()
const browserSync  = require('browser-sync').create()
const bssi         = require('browsersync-ssi')
const ssi          = require('ssi')
const webpack      = require('webpack-stream')
// const sass         = require('gulp-sass')
// const sassglob     = require('gulp-sass-glob')
const less         = require('gulp-less')
const lessglob     = require('gulp-less-glob')
const styl         = require('gulp-stylus')
const stylglob     = require("gulp-noop")
const cleancss     = require('gulp-clean-css')
const autoprefixer = require('gulp-autoprefixer')
const rename       = require('gulp-rename')
const imagemin     = require('gulp-imagemin')
const newer        = require('gulp-newer')
const rsync        = require('gulp-rsync')
const del          = require('del')

function browsersync() {
  browserSync.init({
    server: {
      baseDir: 'app/',
      middleware: bssi({ baseDir: 'app/', ext: '.html' })
    },
    ghostMode: { clicks: false },
    notify: false,
    online: true,
    // tunnel: 'yousutename', // Attempt to use the URL https://yousutename.loca.lt
  })
}

function scripts() {
  return src(['app/js/*.js', '!app/js/*.min.js', 'node_modules/swiper/swiper-bundle.js'])
    .pipe(webpack({
      mode: 'production',
      performance: { hints: false },
      module: {
        rules: [
          {
            test: /\.(js)$/,
            exclude: /(node_modules)/,
            loader: 'babel-loader',
            query: {
              presets: ['@babel/env'],
              plugins: ['babel-plugin-root-import']
            }
          }
        ]
      }
    })).on('error', function handleError() {
      this.emit('end')
    })
    .pipe(rename('app.min.js'))
    .pipe(dest('app/js'))
    .pipe(browserSync.stream())
}

function styles() {
  return src([`app/styles/${preprocessor}/*.*`, `!app/styles/${preprocessor}/_*.*`])
    .pipe(eval(`${preprocessor}glob`)())
    .pipe(eval(preprocessor)())
    .pipe(autoprefixer({ overrideBrowserslist: ['last 10 versions'], grid: true }))
    .pipe(cleancss({ level: { 1: { specialComments: 0 } }, format: 'beautify'  }))
    .pipe(rename({ suffix: ".min" }))
    .pipe(dest('app/css'))
    .pipe(browserSync.stream())
}

function images() {
  return src(['app/images/src/**/*'])
    .pipe(newer('app/images/dist'))
    .pipe(imagemin())
    .pipe(dest('app/images/dist'))
    .pipe(browserSync.stream())
}

function buildcopy() {
  return src([
    '{app/js,app/css}/*.min.*',
    'app/img/**/*.*',
    '!app/img/src/**/*',
    'app/fonts/**/*'
  ], { base: 'app/' })
  .pipe(dest('dist'))
}

async function buildhtml() {
  let includes = new ssi('app/', 'dist/', '/**/*.html')
  includes.compile()
  del('dist/parts', { force: true })
}

function cleandist() {
  return del('dist/**/*', { force: true })
}

function deploy() {
  return src('dist/')
    .pipe(rsync({
      root: 'dist/',
      hostname: '[email protected]',
      destination: 'yousite/public_html/',
      // clean: true, // Mirror copy with file deletion
      include: [/* '*.htaccess' */], // Included files to deploy,
      exclude: [ '**/Thumbs.db', '**/*.DS_Store' ],
      recursive: true,
      archive: true,
      silent: false,
      compress: true
    }))
}

function startwatch() {
  watch(`app/${preprocessor}/**/*`, { usePolling: true }, styles)
  watch(['app/js/**/*.js', '!app/js/**/*.min.js'], { usePolling: true }, scripts)
  watch('app/img/src/**/*.{jpg,jpeg,png,webp,svg,gif}', { usePolling: true }, images)
  watch(`app/**/*.{${fileswatch}}`, { usePolling: true }).on('change', browserSync.reload)
}

exports.scripts = scripts
exports.styles  = styles
exports.images  = images
exports.deploy  = deploy
exports.assets  = series(scripts, styles, images)
exports.build   = series(cleandist, scripts, styles, images, buildcopy, buildhtml)
exports.default = series(scripts, styles, images, parallel(browsersync, startwatch))

codepen:

I will be very glad if you help

Answer 1

})).on('error', function handleError() {
      this.emit('end')
    })
    }))

Removed this part of the code and everything worked!

Answer 2

At a glance, the difference is only in watch with my "working file"

gulp.watch(`${config.mainPath}/**/*.html`, gulp.series(mainHtml))