Page not reloading/autoinjecting with Gulp 4 and Browsersync

Question

Attempting to create boilerplate for new PWA creation using Gulp 4 with Browsersync to automate tasks, auto-reload, and auto-inject changes. Dist folder files are being updated when changes are made. Reload only works with HTML alone. CSS doesn't auto-inject and HTML doesn't reload after changing CSS and HTML. https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

I have read a bunch of other SO questions and attempted different ways of doing this, but nothing works so far. Gist has commented out code to show some of the methods I've tried. I uninstalled Gulp before installing Gulp 4.

import babel from 'gulp-babel';
import browserSync from 'browser-sync';
import del from 'del';
const server = browserSync.create();

// Process and minify css, copy to dist folder
export function styles() {
  return gulp.src(paths.styles.src)
    .pipe(gulp.dest(paths.styles.dest))
    .pipe(server.reload({stream: true}));
}

// Copy html to dist folder
export function html() {
  return gulp.src(paths.html.src)
    .pipe(gulp.dest(paths.html.dest));
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, styles);
  gulp.watch(paths.html.src, html).on('change', server.reload);
}

// Start serving src folder
export function serve(done) {
  server.init({
    server: {
      baseDir: './src'
    }
  });
  done();
}

// Build dist folder, start server, and watch files
const build = gulp.series(clean, gulp.parallel(styles, html), serve, watch);

// Make build be default task
export default build;

I expected the page to reload/auto-inject when changes were made. Terminal output indicates this is happening, but no changes are displayed:

[13:35:57] Starting 'styles'...
[Browsersync] 1 file changed (app.css)
[13:35:57] Finished 'styles' after 8.05 ms
[13:36:03] Starting 'html'...
[13:36:03] Finished 'html' after 6.04 ms
[Browsersync] Reloading Browsers...

Answer 1

Your server.baseDir should be your dist directory:

export function serve(done) {
    server.init({
        server: {
            baseDir: './dist'
        }
    });
    done();
}

I created a simplified version in this gist .

Answer 2

I have resolved the issue and updated the gist. There was an issue with my watch function and it seems necessary to have reloading done in a separate function.

function reload(done) {
  server.reload();
  done();
}

// Watch files for changes and reload server
export function watch() {
  gulp.watch(paths.styles.src, gulp.series(styles, reload));
  gulp.watch(paths.html.src, gulp.series(html, reload));
}

Gist: https://gist.github.com/flaura42/a22823d97baf889160b2b18ca85dbfb4

Figured out issue after taking another look at this recipe: https://github.com/gulpjs/gulp/blob/master/docs/recipes/minimal-browsersync-setup-with-gulp4.md