Refreshing the page via browserSync overtakes compiling the files. How to cope?

Question

JavaScript

Hello. Updating via browserSync works too fast, pug(jade) after compiling to html compiles and eventually updates html for too long. I don't see any other option how to put setTimeout on browserSync, but are there other, faster options?( Thanks.

gulp.task('pug', function() {
  return gulp.src('src/pug/**/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('src'))
    .pipe(browserSync.reload({stream: true}))
});

gulp.task('browser-sync', function() {
  browserSync({
    server: {
      baseDir: 'src'
    },
    notify: false
  });
});

gulp.task('watch', ['browser-sync', 'pug', 'css-libs', 'scripts'], function() {
  gulp.watch('src/sass/**/*.scss', ['sass']); // Наблюдение за sass файлами в папке sass
  gulp.watch('src/pug/**/*.pug', ['pug']); // Наблюдение за HTML файлами в корне проекта
  gulp.watch('src/js/**/*.js', browserSync.reload);   // Наблюдение за JS файлами в папке js
});

Answer 1

need to catch the event

gulp.src('src/pug/**/*.pug')
    .pipe(pug())
    .pipe(gulp.dest('src'))
    .on('end', function() {browserSync.reload({stream: true}))