Gulp4 watch no reaction to changes

Question

Migrating to Gulp 4 I encountered serious issues: no reaction to changes when using gulp.watch or gulp-watch.

import gulp from 'gulp';
// import {get as browserSync} from 'browser-sync';
import watch from 'gulp-watch';

// const bs = browserSync('server');


var bSync = require('browser-sync').create();
gulp.task('browser-sync', function() {
    bSync.init({
        server: {
            baseDir: "../"
        },
        notify: true
    });
});


gulp.task('watch', gulp.parallel('browser-sync', ()=> {
    global.watch = true;

    gulp.watch('app/{styles,blocks}/**/*.+(less|styl)', gulp.series('styles', 'styles:lint', bSync.reload('styles/app-min.css')));
    gulp.watch(['app/+(images|fonts)/**/*', 'app/*.html'], gulp.parallel('copy', bSync.reload)); // or watch( instead of gulp.watch(

    gulp.start('scripts:watch');
    bSync.reload();
}));

and code for scripts:

import gulp from 'gulp';
import errorHandler from 'gulp-plumber-error-handler';
import makeWebpackConfig from '../webpack.conf.js';
import webpack from 'webpack';

const {NODE_ENV, NOTIFY} = process.env;
const isDebug = NODE_ENV !== 'production';
const scriptsErrorHandler = errorHandler('Error in \'scripts\' task');

function runWebpack(watch = false) {
    return function (callback) {
        const webpackConfig = makeWebpackConfig({
            watch,
            debug: isDebug,
            sourcemaps: isDebug,
            notify: NOTIFY
        });

        return webpack(webpackConfig, (error, stats) => {
            const jsonStats = stats.toJson();
            if (jsonStats.errors.length) {
                jsonStats.errors.forEach(message => {
                    scriptsErrorHandler.call({emit() {}}, {message});
                });
            }

            if (watch === false) callback();
        });
    };
}

gulp.task('watch', runWebpack(false));    
gulp.task('scripts:watch', runWebpack(true));

My tasks are located inside the tasks folder. And to load tasks, the default task uses the gulp-hub module:

var HubRegistry = require('gulp-hub');
gulp.registry(new HubRegistry(['*.js']));

Where is the problem here ?

Answer 1

sorry i didn't respond sooner.

I'm still getting used to working in Gulp 4 but the issues I've encountered have always been related to not providing a callback. I'm not sure if it's best-practice but when in doubt, I just threw a callback into every single gulp task. For starters, I would try doing that -- adding an empty callback in 'watch' and 'browser-sync'. Additionally, I would change the second argument in the gulp.task('watch'...) to be series and not parallel, since functions in watch depend on 'browser-sync'.

Let me know if those get you anywhere -- sorry I can't be of more help.