Gulp is not watching - gulp

Question

I'm working on an old project which is using Gulp.
I had to update gulp v3 to v4 and this is how it looks like:
var gulp = require('gulp')
var sass = require('gulp-sass')
var sourcemaps = require('gulp-sourcemaps')
var browserSync = require('browser-sync').create()
var uglify = require('gulp-uglify')
var concat = require('gulp-concat')
var notify = require('gulp-notify')
var series = require('stream-series') // Helps to concat js files in desired order
// BrowserSync task
gulp.task('browserSync', function () {
browserSync.init({
server: {
baseDir: './'
}
})
})
// Style task
gulp.task('sass', function () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(concat('style.min.css'))
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./css'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Styles task complete' }))
})
// Script task
gulp.task('script', function () {
return series(
gulp.src('./src/js/vendor/**/*.js'),
gulp.src('./src/js/modules/**/*.js')
)
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./js'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Script task complete' }))
})
// watch task
gulp.task('watch', gulp.series('sass', 'script', 'browserSync'), function () {
gulp.watch('./src/sass/**/*.scss', ['sass'])
gulp.watch('./src/js/**/*.js', ['script'])
gulp.watch('./index.html', browserSync.reload)
})
If I run gulp watch it compiles all sass and JS files and shows the page in browser correctly.
But after that it doesn't watch anymore and if I change any sass or JS files, those changes are not applied.
What is wrong with my gulp script?

Answer 1

I managed to fix it myself.
const gulp = require('gulp')
const sass = require('gulp-sass')
const sourcemaps = require('gulp-sourcemaps')
const browserSync = require('browser-sync').create()
const uglify = require('gulp-uglify')
const concat = require('gulp-concat')
const notify = require('gulp-notify')
const series = require('stream-series') // Helps to concat js files in desired order
// HTML task
function html () {
return gulp.src('./*.html')
.pipe(gulp.dest('./build'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'HTML task complete' }))
}
// Style task
function style () {
return gulp.src('./src/sass/**/*.scss')
.pipe(sourcemaps.init())
.pipe(sass({
errLogToConsole: true,
outputStyle: 'compressed'
}))
.pipe(concat('style.min.css'))
// .pipe(cssmin())
.pipe(sourcemaps.write('./'))
.pipe(gulp.dest('./build/css'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Styles task complete' }))
}
// Script task
function script () {
// return gulp.src('./src/js/**/*.js')
return series( // concats js files in desired order
gulp.src('./src/js/vendor/**/*.js'),
gulp.src('./src/js/modules/**/*.js')
)
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest('./build/js'))
.pipe(browserSync.stream())
.pipe(notify({ message: 'Script task complete' }))
}
function watch () {
html()
style()
script()
browserSync.init({
server: {
baseDir: './build'
}
})
gulp.watch('./*.html', html).on('change', browserSync.reload)
gulp.watch('./src/sass/**/*.scss', style).on('change', browserSync.reload)
gulp.watch('./src/js/**/*.js', script).on('change', browserSync.reload)
}
exports.html = html
exports.style = style
exports.script = script
exports.watch = watch
please let me know if you have any suggestion to improve my solution.