Browser-sync not reloading in gulp

Question

I run gulp serve in the terminal, and the window pops up. But, when I make changes in the .html, those changes aren't reloading onto the page. I have no idea what async completion is, because this is my first time receiving this error.

[BS] Local URL: http://localhost:3000
[BS] External URL: http://10.0.0.58:3000
[BS] Serving files from: temp
[BS] Serving files from: dev
[BS] Serving files from: dev/html
^C[15:49:48] The following tasks did not complete: serve
[15:49:48] Did you forget to signal async completion?

let serve = () => {
    browserSync({
        notify: true,
        reloadDelay: 0, // A delay is sometimes helpful when reloading at the
        server: {       // end of a series of tasks.
            baseDir: [
                `temp`,
                `dev`,
                `dev/html`
            ]
        }
    });
    watch(`dev/html/**/*.html`, series(validateHTML)).on(`change`, reload);
    watch(`dev/js/*.js`, series(lintJS, compressJS)).on(`change`, reload);
    watch (`dev/css/**/*.css`, series(compressCSS)) .on(`change`, reload);
};

score 0 · Answer 1 · answered Apr 27 '20 at 11:46

Gulp 4 requires each task to complete so it can continue to running the other tasks in the specified order (eg parallel or series).

You are getting that fatal error because your serve task is missing the done callback which lets gulp know you are ready to start the next task in the queue.

More info here: What does Gulp "done" method do?

Below is an updated version of your serve task which will allow it to continue running concurrently without cause a fatal error.

let serve = (done) => { // add done as an argument
    browserSync({
        notify: true,
        reloadDelay: 0, // A delay is sometimes helpful when reloading at the
        server: {       // end of a series of tasks.
            baseDir: [
                'temp',
                'dev',
                'dev/html'
            ]
        }
    });
    watch('dev/html/**/*.html', series(validateHTML)).on('change', reload);
    watch('dev/js/*.js', series(lintJS, compressJS)).on('change', reload);
    watch ('dev/css/**/*.css', series(compressCSS)) .on('change', reload);
    done();  // call the done method when you are ready to move onto the next task.
};

Browser-sync not reloading in gulp

1 Answers1