After upgrade to Gulp 4 default task is not detecting default changes for JS & Scss

Question

I upgraded the gulp to 4.0.2 from Gulp version 3. it will not detect changes when the tracked JSa and SCSS file is changed.

Gulp version I am using :- CLI version: 2.3.0 Local version: 4.0.2

gulpfile.js

   'use strict';

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    del = require('del'),
    jshint = require('gulp-jshint'),
    concat = require('gulp-concat'),
    rename = require('gulp-rename'),
    uglify = require('gulp-uglify'),
    strip = require('gulp-strip-comments'),
    livereload = require('gulp-livereload'),
    http = require('http'),
    st = require('st'),
    sourcemaps = require('gulp-sourcemaps'),
    ngAnnotate = require('gulp-ng-annotate'),
    babel = require('gulp-babel'),
    uglifycss = require('gulp-uglifycss'),
    browserSync  = require('browser-sync').create();

//Rerun the task when a file changes
var watch_hintJs = ['./global/util/*.js', './global/util/**/*.js', './modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'];
var watch_hintscss = ['./global/scss/*.scss', './modules/**/*.scss'];


// This method is used to delete the files
gulp.task('clean',  ()=> {
     return del(['./assets/css']);
});
var globalCSS = ['./assets/libs/css/**','./assets/libs/css/*.css'];
gulp.task('css',  ()=> {
   return gulp.src(globalCSS)
        .pipe(concat('myapp-main-libs.css'))
        .pipe(uglifycss({
            "uglyComments": true
        }))
        .pipe(gulp.dest('./assets/css/'));
});


/* SASS TO CSS CONVERSION*/
gulp.task('sass',  ()=> {
    return gulp.src(['./global/scss/*.scss', './global/scss/lib/*.scss', './modules/**/*.scss'])
        .pipe(sass().on('error', sass.logError))
        .pipe(sass())
        .pipe(concat('myapp-main.css'))
        //.pipe(strip())
        .pipe(uglifycss({
            "uglyComments": true
        }))
        .pipe(gulp.dest('./assets/css/'));
});

//This method is converting all JS files to Single file//
var jsFiles = ['./global/util/*.js', './global/util/lib/*.js', './global/util/components/*.js',
    './modules/**/*Service.js', './modules/**/*Directive.js', './modules/**/*Controller.js', './modules/**/*Constant.js'],
    jsDest = './assets/js/',
    jsLibs = [
        'assets/libs/js/tether.min.js',
        'assets/libs/js/jquery.min.js',
        'assets/libs/js/jquery-ui-min.js',
        'assets/libs/js/bootstrap.min.js',
        'assets/libs/js/angular.min.js',
        'assets/libs/js/angular-ui-router.min.js',
        'assets/libs/js/ui-grid-min.js',
        'assets/libs/js/html2canvas.js',
        'assets/libs/js/ui-bootstrap-tpls-2.5.0.min.js',
        'assets/libs/js/accordian.js',
        'assets/libs/js/angularResizable.js',
        'assets/libs/js/angular-animate.min.js',
        'assets/libs/js/ngToast.js',
        'assets/libs/js/angular-sanitize.js',
        'assets/libs/js/pubsub.js',
        'assets/libs/js/angular-environment.js',
        'assets/libs/js/deferred-with-update.js',
        'assets/libs/js/multiselect.js',
        'assets/libs/js/angular-chart.min.js',
        'assets/libs/js/common.js',
        'assets/libs/js/bootstrap-colorpicker-module.min.js',
        'assets/libs/js/dom-to-image.js',
        'assets/libs/js/alasql.min.js',
        'assets/libs/js/xlsx.core.min.js',
        'node_modules/babel-polyfill/dist/polyfill.min.js',
        'assets/libs/js/jquery.csv.js',
        'assets/libs/js/z-worker.js',
        'assets/libs/js/zip.js'
    ];
gulp.task('libs',  ()=> {
    return gulp.src(jsLibs)
        .pipe(strip())
        .pipe(concat('myapp-lib-scripts.js'))
        .pipe(gulp.dest(jsDest));
});
var minify = require('gulp-minify');
gulp.task('scripts',  ()=> {
    return gulp.src(jsFiles)
        .pipe(jshint())
        .pipe(sourcemaps.init())
        .pipe(babel({
            presets: ['es2015', 'stage-3'],
            "plugins": ["transform-async-to-generator"]
        }))
        .pipe(concat('myapp-scripts.js'))
        .pipe(uglify({
            mangle: false
        }))
        .pipe(sourcemaps.write('./maps'))
        .pipe(gulp.dest(jsDest))
        .pipe(livereload());
});



/*jshint, watch, browserify*/

// configure the jshint task
gulp.task('jshint', ()=> {
    return gulp.src(watch_hintJs)
        .pipe(jshint())
        .pipe(jshint.reporter('jshint-stylish'));
});

gulp.task('browser-sync',  gulp.series('sass',  ()=> {
    browserSync.init({
        server: {
            injectChanges: true,
            baseDir: "./"
        },
        browser: ["chrome.exe"]
    });
}));


gulp.task('js-watch',  gulp.series('scripts',  () =>{
    console.log('you changed the JS');
    return browserSync.reload();
}));
gulp.task('css-watch',  gulp.series('sass',  ()=> {
    console.log('you changed the css');
    return browserSync.reload();
}));

gulp.task('watch',  gulp.series('browser-sync',  ()=> {
    console.log('you reach watch');
    gulp.watch(watch_hintJs, ['js-watch']);
    gulp.watch(watch_hintscss, ['css-watch']);
     gulp.watch(watch_hintJs, browserSync.reload());
    
    return livereload.listen();

}));




gulp.task('server', (done)=> {
    return http.createServer(
        st({
            path: __dirname + '/',
            index: 'index.html',
            cache: false
        })
    ).listen(8080, done);
});
var revts = require('gulp-rev-timestamp');
gulp.task('rev-timestamp',  ()=> {
   return gulp.src("./index.html")
        .pipe(revts())
        .pipe(gulp.dest('.'));
});
gulp.task('default', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'rev-timestamp', 'watch'));
gulp.task('prod', gulp.series('clean', 'css', 'sass', 'libs', 'scripts', 'jshint', 'rev-timestamp'));

Note: Style task is working correctly and moving all .scss files from source to destination.

I really appreciate any help since I am running out of ideas

Answer 1

Finally, I found the solution as below:-

gulp.task('watch',    ()=> {
    console.log('you reach watch');
    gulp.watch(watch_hintJs).on('change',gulp.parallel('js-watch'));
    gulp.watch(watch_hintscss).on('change',gulp.parallel('css-watch'));
    return livereload.listen();

});