How to set up browserSync reload html, js in Gulp 4?

Question

gulp.js

Can't set up reload html and js. Where is my error?

const
  gulp          = require('gulp'),
  sass          = require('gulp-sass'),
  browsersync   = require("browser-sync").create(),
  concat        = require('gulp-concat'), 
  concatCSS     = require('gulp-concat-css'),
  uglify        = require('gulp-uglifyjs'), 
  cssnano       = require('gulp-cssnano'), 
  rename        = require('gulp-rename'),
  del           = require('del'),
  imagemin      = require('gulp-imagemin'),
  pngquant      = require('imagemin-pngquant'),
  cache         = require('gulp-cache'),
  autoprefixer  = require('gulp-autoprefixer'),
  htmlmin       = require('gulp-htmlmin'),
  gutil         = require( 'gulp-util' ),
  ftp           = require( 'vinyl-ftp' );

function gulpSass() {
  return gulp
    .src('assets/sass/**/*.sass')
    .pipe(sass({ outputStyle: "expanded" }))
    .pipe(autoprefixer(['last 15 versions', '> 1%', 'ie 8', 'ie 7'], {cascade: true}))
    .pipe(gulp.dest('assets/css'))
    .pipe(browsersync.stream())
}

function browserSync(done) {
  browsersync.init({
    server: {
      baseDir: "./"
    },
    port: 3000,
    notify: false
  });
  done();
}

function clean() {
  return del(["dist"]);
}

function clear() {
  return cache.clearAll();
}

function watchFiles(done) {
  gulp.watch('assets/sass/**/*.sass', gulp.parallel(gulpSass));
  gulp.watch('assets/css/**/*.css', browserSync.reload);
  gulp.watch("*.html", browserSync.reload);
  gulp.watch('assets/js/**/*.js', browserSync.reload);
  done();
}


const watch = gulp.parallel(watchFiles, browserSync);

exports.clean = clean;
exports.clear = clear;
exports.watch = watch;

Answer 1

Browser-sync must be initialized in watch`e
const
gulp = require('gulp'),
sass = require('gulp-sass'),
browserSync = require('browser-sync').create(),
cleanCss = require(' gulp-clean-css'),
autoprefixer = require('gulp-autoprefixer');
function styles(){
return gulp.src('./src/sass/**/*.sass')
.pipe(sass())
.pipe(autoprefixer({
browsers: ['last 5 versions'],
cascade: false
}))
.pipe(cleanCss({
level: 2
}))
.pipe(gulp.dest('./src/css'))
.
}
function watch(){
browserSync.init({
server: "./"
});
gulp.watch('./src/sass/**/*.sass', styles);
gulp.watch('./*.html').on('change', browserSync.reload);
}
gulp.task('watch', watch);
something like this...