Browser-sync is not refreshing files observed by gulp-watch - gulp

Question

In my build process I want to put the artifacts of the build steps into .tmp/serve directory.
I managed to set up gulp-watch to fire specific tasks when I modify files in my working directory. E.q. when I modify htmls, they are built and the artifacts are pasted into desired .tmp/serve directory
I'm having problems with reloading the files from .tmp/serve with browser-sync. When I save changes in my working directory multiple times, browser-sync refreshes only the previous changes (1 change delay). I guess the reload function fires before gulp-dest finishes. Note that if I refresh browser manually the current changes appear.
Am I doing something wrong?
Build htmls task
gulp.task('html', ['styles'], () => {
return gulp.src('app/*.html')
.pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
.pipe(gulp.dest('.tmp/serve'))
;
});
Sever task
const reload = browserSync.reload;
gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
/*********** SEE THE LINES BELOW **************/
gulp.watch([
'.tmp/serve/**/*',
]).on('change', reload);
gulp.watch('app/styles/**/*.scss', ['styles']);
gulp.watch('app/fonts/**/*', ['fonts']);
gulp.watch('app/*.html', ['html']);
gulp.watch('app/scripts/**/*', ['build:scripts']);
gulp.watch('bower.json', ['wiredep', 'fonts']);
});

Answer 1

You can use run-sequence to reload after a build.
Your gulpfile would become like this..
var gulp = require('gulp'),
runSeq = require('run-sequence')
...
;
gulp.task('build', ['styles', 'fonts', 'build:scripts', 'html', 'images']);
gulp.task('serve', ['build', 'watch'], () => {
browserSync({
notify: false,
port: 9000,
server: {
baseDir: ['.tmp/serve'],
routes: {
'/bower_components': 'bower_components'
}
}
});
gulp.task('reload', function (callback) {
browserSync.reload();
callback();
});
gulp.task('watch', ['watch-styles', ...]);
gulp.task('watch-styles', function () {
gulp.watch('app/styles/**/*.scss', function () {
runSeq('styles', 'reload');
});
});
/* And so on for every watch task */
Note that run-sequence needs your tasks to either return a stream or to call a callback, otherwise it will cause gulp to pause indefinitely. Read the Doc to learn more.