Why are changes not pulled to the page after refreshing the page with browser-sync?

Question

JavaScript

Hello.
When I make changes to twig (html) files and save them, the page refreshes but the changes are not pulled.
This happens in chrome, if you take firefox then everything works as it should.

const projectFolder = 'dist';
const sourceFolder = 'src';
let path = {
  build: {
    twig: projectFolder + '/',
  },
  src: {
    twig: [sourceFolder + '/twig/*.twig'],
  },
  watch: {
    twig: sourceFolder + '/twig/**/*.twig',
  },
  clean: './' + projectFolder + '/',
};

function browserSync() {
  browsersync.init({
    server: {
      baseDir: './' + projectFolder + '/',
    },
    port: 3000,
    notify: false,
  });
}

function watchFiles() {
  gulp.watch([path.watch.twig], html);
}

function clean() {
  return del(path.clean);
}

function html() {
  return src(path.src.twig)
    .pipe(
      twig()
    )
    .pipe(dest(path.build.twig))
    .pipe(browsersync.stream());
}

const build = gulp.series(clean, gulp.parallel(html));
const watch = gulp.series(build, gulp.parallel(browserSync, watchFiles));

exports.html = html;
exports.build = build;
exports.watch = watch;

gulp: 4.0.2,
browser-sync: 2.26.7
gulp-twig: 1.2.0

Is there any way to fix this?
Thank you.

Answer 1

const watch = gulp.parallel(build, watchFiles, browserSync);