Gulp 'watch' not picking up changes after moving to Gulp 4 with BrowserSync

Question

Just migrated over to Gulp 4 from Gulp 3.9.1 and whilst everything is working fine when I run gulp and it compiles everything fine and I can start the watch command fine so it appears like it's watching for changes, whenever a change happens it doesn't seem to be able to pick it up.

Here is my watch task:

gulp.task('watch', gulp.series('browser-sync', function() {
    gulp.watch(['scss/**/*.scss'], gulp.series('css-minify'));
    gulp.watch(['js/dev/**/*.js'], gulp.series('js-watch'));
}));

browser-sync task:

gulp.task('browser-sync', function() {
    browserSync.init({
        open: 'external',
        proxy: "mysite.local",
        host: 'mysite.local',
        // port: 5000,
        browser: "chrome",
    });
});

Is there another change required in Gulp 4 that I am missing here?

Answer 1

Ok, seems that in Gulp 4 it requires a stream, promise, event emitter, child process or observable to be returned from a function or task.

So once I changed:

gulp.task('browser-sync', function() {
    browserSync.init({
        open: 'external',
        proxy: "mysite.local",
        host: 'mysite.local',
        // port: 5000,
        browser: "chrome",
    });
});

to:

gulp.task('browser-sync', function(done) {
    browserSync.init({
        open: 'external',
        proxy: "mysite.local",
        host: 'mysite.local',
        // port: 5000,
        browser: "chrome",
    });
    done();
});

...it was all working again.

Note the addition of the parameter passed to the anonymous function and then evoked at the end of the function - as explained in the linked article.