How to create a simple html live reload with gulp and browser-sync

Question

I'm new to using Gulp (especially Gulp 4) and to start of I just want to have a very basic live reload on any changes in my index.html file (in the root folder). So far I have this:

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

// Static server
gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./"
        }
    });
});

gulp.task('default', ['html'], function() {
    // watch for HTML changes
    gulp.watch('*.html', function() {
       // run styles upon changes
       gulp.run('html');
    });
 });

How do I connect the browser-sync task with the gulp watch? I have tried using the official documentation but the examples there seem to be more complex than what I am trying to achieve.

Answer 1

Change to:

gulp.task('default', gulp.series('html', function() {
  // watch for HTML changes
  gulp.watch('*.html', gulp.series('html'))
}));

and see a how to migrate from gulp v3 to v4 guide since most of the code you are going to find is v3.