Browser sync is not listening for JS changes, what's the problem?

Question

JavaScript

There are two modes in production and development builds. I connect the slider and libraries, but there are no changes in the browser, and if I run index.html from production, then everything is fine, what's wrong?
~~~~~~~~~~~~~gulpfile~~~~~~~~~~~~~~~~~~~~

const gulp = require('gulp');
const autoprefixer = require('gulp-autoprefixer');
const del = require('del');
const browserSync = require('browser-sync').create();
const cleanCSS = require('gulp-clean-css');
const sourcemaps = require('gulp-sourcemaps');
const gulpif = require('gulp-if');
const gcmq = require('gulp-group-css-media-queries');
const smartgrid = require('smart-grid');
const sass = require('gulp-sass');
const webpack = require('webpack');
const webpackStream = require('webpack-stream');
const isDev = (process.argv.indexOf('--dev') !== -1);
const isProd = !isDev;
const isSync = (process.argv.indexOf('--sync') !== -1);




function clear(){
  return del('build/*');
};

function styles(){
  return gulp.src('./src/css/styles.sass')
         .pipe(gulpif(isDev, sourcemaps.init()))
         .pipe(sass())
         
         .pipe(gcmq())
         .pipe(autoprefixer({
                browsers: ['> 0.1%'],
                cascade: false
            }))
         //.on('error', console.error.bind(console))
         .pipe(gulpif(isProd, cleanCSS({
         		level: 2
         })))
         .pipe(gulpif(isDev, sourcemaps.write()))
         .pipe(gulp.dest('./build/css'))
         .pipe(gulpif(isSync, browserSync.stream()));
};

function img(){
  return gulp.src('./src/img/**/*')
         .pipe(gulp.dest('./build/img'))
};

function html(){
  return gulp.src('./src/*.html')
         .pipe(gulp.dest('./build'))
         .pipe(gulpif(isSync, browserSync.stream()));
};

const webpackConfig = require("./webpack.config.js");

function scripts() {
    return gulp.src("./src/js/index.js")
        .pipe(webpackStream(webpackConfig), webpack)
        //.pipe(gulpif(production, rename({
         //   suffix: ".min"
       // })))
        .pipe(gulp.dest("./build/js/"))
        //.pipe(debug({
        //    "title": "JS files"
        //}))
        .on("end", browserSync.reload);
};

function watch(){
  if(isSync){
    browserSync.init({
          server: {
              baseDir: "./build/",
          }
      });
  }

  gulp.watch('./src/css/**/*.sass', styles);
  gulp.watch('./src/**/*.html', html);
  gulp.watch('./smartgrid.js', grid);
};

function grid(done){
  delete require.cache[require.resolve('./smartgrid.js')];

  let settings = require('./smartgrid.js');
  smartgrid('./src/css', settings);

  done();
}

let build = gulp.series(clear, 
  gulp.parallel(scripts, styles, img, html)
);

gulp.task('build', build);
gulp.task('watch', gulp.series(build, watch));
gulp.task('grid', grid);