Gulp 4 watch running once

Question

I've been trying to get this for a while now, but there's no way I can get it running after the first file save.

Whenever I start gulp and make any changes on a html file, it reloads the page correctly, but after that first save, it just won't do it, even tho the html file has been saved to public folder.

I have updated to Gulp v4, and I was trying to add the gulp.series and gulp.parallel, I don't know what I'm doing wrong. If anyone can see any mistake in the code... (only on the generateHtml for now, if we can get it work, I guess I can make them run also).

var gulp = require("gulp"),
    browser = require("browser-sync").create(),
    less = require("gulp-less"),
    autoprefixer = require('gulp-autoprefixer'),
    sourcemaps = require("gulp-sourcemaps"),
    concat = require('gulp-concat'),
    clean = require('gulp-rimraf'),
    gulpCopy = require('gulp-copy');

//Sincronización de pantallas
gulp.task('browser-sync', () => {
    browser.init({
        server: {
            baseDir: './public'
        },
        notify: {
            styles: {
                top: 'auto',
                bottom: '0'
            }
        },
        injectChanges: true
    });
});

//Refrescar pantalla
gulp.task('re-loaded', function() {
    console.log("a")
    browser.reload()
});


gulp.task('watch', () => {
    gulp.watch('src/js/*.js', gulp.series('cleanJs', 'generateJs', 're-loaded'));
    gulp.watch('src/css/*.less', gulp.series('cleanCss', 'less', 're-loaded'));
    gulp.watch('src/**/*.html', gulp.series('cleanHtml', gulp.parallel('generateHtml', 're-loaded')));
    gulp.watch('src/img/**/**.*', gulp.series('cleanImg', 'copy', 're-loaded'));
    gulp.watch('src/libs/**/**.*', gulp.series('cleanLibs', 'copy', 're-loaded'));
    gulp.watch('src/fonts/**.*', gulp.series('cleanFonts', 'copy', 're-loaded'));
});

//Generar nuevo HTML en public
gulp.task('generateHtml', () => {
    gulp.src('src/*.html')
        .pipe(gulp.dest('./public/'))
});

//Actualización de las funciones JS cuando guardemos
gulp.task('generateJs', () => {
    gulp.src('src/js/*.js')
        .pipe(concat("script.js"))
        .pipe(gulp.dest('./public/js'))
});

//Actualización de los estilos CSS cuando guardemos
gulp.task('less', () => {
    gulp.src(['src/*.less'])
    .pipe(less({
        // pretty: true
    }))
    .pipe(autoprefixer('last 2 versions'))
    .pipe(concat("style.css"))
    .pipe(gulp.dest('./public/css'))
});

//Copiar a public
gulp.task('copy', () => {
    return gulp
        .src(['src/fonts/**/**.*', 'src/img/**/**.*', 'src/libs/**/**.*'])
        .pipe(gulpCopy('./public/', {prefix: 1} ));
});

//Borrar imágenes de public
gulp.task('cleanImg', () => {
    return gulp.src("./public/img/**/**.*", { read: false }).pipe(clean());
});

//Borrar librerías de public
gulp.task('cleanLibs', () => {
    return gulp.src("./public/libs/**/**.*", { read: false }).pipe(clean());
});

//Borrar fuentes de public
gulp.task('cleanFonts', () => {
    return gulp.src("./public/fonts/**/**.*", { read: false }).pipe(clean());
});

//Borrar JS de public
gulp.task('cleanJs', () => {
    return gulp.src("./public/js/*", { read: false }).pipe(clean());
});

//Borrar CSS de public
gulp.task('cleanCss', () => {
    return gulp.src("./public/css/*.css", { read: false }).pipe(clean());
});

//Borar HTML de public
gulp.task('cleanHtml', () => {
    return gulp
        .src("./public/*.html", { read: false })
        .pipe(clean());
});

gulp.task('default', gulp.parallel('generateHtml', 'generateJs', 'less', 'browser-sync', 'watch', 'copy'));

Answer 1

This task probably never finishes:

//Refrescar pantalla
gulp.task('re-loaded', function() {
    console.log("a")
    browser.reload()
});

change to:

//Refrescar pantalla
gulp.task('re-loaded', function(done) {
    console.log("a")
    browser.reload()
    done()
});

or

//Refrescar pantalla
gulp.task('re-loaded', () => {
    console.log("a")
    browser.reload()
});

[Actually, upon second thought, this second option probably would not work because it would not be returning a stream. I doubt browserSync.reload() returns a stream or promise so returning its result would not be helpful. Hopefully, the callback method - the first option above - does work.]