Can't get Gulp to execute Browser-sync on file change

Question

After couple of years, I'm back at Gulp and it seems like a lot has changed. I'm trying to get a simple HTML file refresh on edit using Gulp and Browser-sync but the Gulp task seems to be failing with the following error:

AssertionError [ERR_ASSERTION]: Task function must be specified
    at Gulp.set [as _setTask] (/Users/me/dev/myProject/node_modules/undertaker/lib/set-task.js:10:3)
    at Gulp.task (/Users/me/dev/myProject/node_modules/undertaker/lib/task.js:13:8)
    at Object.<anonymous> (/Users/me/dev/myProject/gulpfile.js:11:6)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)
    at Module._load (node:internal/modules/cjs/loader:878:12)
    at Module.require (node:internal/modules/cjs/loader:1061:19)
    at require (node:internal/modules/cjs/helpers:103:18)
    at requireOrImport (/usr/local/lib/node_modules/gulp-cli/lib/shared/require-or-import.js:19:11) {
  generatedMessage: false,
  code: 'ERR_ASSERTION',
  actual: false,
  expected: true,
  operator: '=='
}

It seems like I have 2 versions of Gulp, since I get this:

CLI version: 2.3.0
Local version: 4.0.2

when I do:

gulp --version

Here is my gulpfile.js file.

var gulp        = require('gulp');
var browserSync = require('browser-sync').create();

// Reloading browsers
gulp.task('html-watch',  function (done) {
    browserSync.reload();
    done();
});

// Use default task to launch Browsersync and watch html files
gulp.task('default', ['html-watch'], function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./site"
        }
    });

    // add browserSync.reload to the tasks array to make
    // all browsers reload after tasks are complete.
    gulp.watch("site/*.html", ['html-watch']);
});

Answer 1

I got it working by changing the format to the following:

var gulp = require('gulp');
const { series } = require('gulp');
var browserSync = require('browser-sync').create();

// Reloading browsers
function refresh(done) {
    browserSync.reload();
    done();
};

function watch_html(done){
    gulp.watch("site/*.html", refresh);
    done();
}

// Use default task to launch Browsersync and watch html files
function server(cb) {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./site"
        }
    });

    cb();
};

exports.default = series(server, watch_html);

... which might still not be the right way to format it. browser-sync is working, but just a reminder: If you are going to test the gulp + browser-sync workflow, make sure to do so with a proper html file. Having just a string such as "Hello World?" in your index.html is not a good idea :)

At the end of the day, the answer is gulp 4.x.x is quite a different API.