BrowserSync displays changes after 2nd refresh

Question

I'm facing with annoying issue with browserSync plugin in gulp. If I change something inside html, the change is displayed after second refresh. It is only with html, if I change css or js the changes are visible after first reload. Here is my browserSync task:

gulp.task('serve', function () {

    browserSync.init({
        server: {
            baseDir: ["./dist", "./dev", "./../../global-assets"]
        }
    });

    gulp.watch('dev/sass/**', ['sass']);
    gulp.watch('dev/sass/**').on('change', reload);
    gulp.watch('dev/js/*.js', ['js']);
    gulp.watch('dev/js/*.js').on('change', reload);
    gulp.watch('dev/templates/*.html', ['htmlSSI']);
    gulp.watch('dev/templates/*.html').on('change', reload);
});

and the SSI task:

gulp.task('htmlSSI', function() {
        es.merge(gulp.src(globalTemplates), gulp.src(localTemplates))
        .pipe(includer())
        .pipe(gulp.dest('dist/'));
});

Answer 1

it looks like you are reloading page before htmlSSI task change html in dist folder

gulp.watch('dev/templates/*.html').on('change', reload);

try to change it to watch output html from htmlSSI task

gulp.watch('dist/*.html').on('change', reload);