I cannot work out why my gulp file is not watching my html files?

Question

I am working with gulp 4 for the first time after some experience with gulp 3 in the past. I have a gulp build set up for my project and although it works great for everything else it just simply refuses to watch any html changes and reload the page on change. I do not get any errors and get the standard 'serving files from ./dist' in my terminal when running gulp watch.

It was working but I must have changed something but just cannot work out what!

// bs
function browserSync(done) {
  server.init({
    server: {
      baseDir: "./dist"
    }
  });
  done();
}

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

// html task
function html() {
  const out = `${dist}/`;

  return gulp
    .src(`${src}/**/*.html`)
    .pipe(newer(out))
    .pipe(devBuild ? noop() : htmlclean())
    .pipe(gulp.dest(out));
}

// watch for file changes
function watch(done) {
  // html changes
  gulp.watch(`${src}/**/*.html`, gulp.series(html, reload));
  // css changes
  gulp.watch(`${src}/scss/**/*`, gulp.series(css));
  // js changes
  gulp.watch(`${src}/js/**/*`, gulp.series(js));
  //sw changes
  gulp.watch(`${src}/sw.js`, gulp.series(sw));

  done();
}

exports.watch = gulp.parallel(watch, browserSync);

I expect the task to copy over my html files and the server to refresh with my html changes included

Answer 1

I was missing the reference to exports in my build task. Not sure if this would effect it but I also deleted my browser cache and it seemed to start working again. Not sure on this one but case solved if this ever helps anyone reading in the future.

exports.build = gulp.series(
  exports.clean,
  gulp.parallel(
    exports.favicon,
    exports.fonts,
    exports.html,
    exports.css,
    exports.js,
    exports.sw
  )
);

Edit*: Turns out I was loading assets from my service worker and completely forgot to turn on Chromes reload on refresh for developing with a SW!