Gulp：观看HTML文件，执行一些任务，然后执行browserSync.reload

Question

Our HTML files are 'assembled' from a few template/partial HTML files. Now I want Gulp to be able to do these tasks sequentially :

1. Watch 'template' HTML files
2. If there is any update, run the tasks pages
3. Then, refresh the webpage.

I read through this tutorial: https://www.browsersync.io/docs/gulp/ . But it simply watches the HTML files and reload. I tried this:

gulp.watch([
    path.join(dpw.src.commonLayouts, 'layout.html'),
    dpw.src.commonPages + "/**/*.html",
    dpw.src.sitePages + "/**/*.html"
], ['pages']).on("change", browserSync.reload);

The web page will be reloaded automatically. And the task pages is run.

However, the refreshed page is always one version behind. It means, if I change some text from "12" to be "123", the page is refreshed but the text is "12". Then I change to "1234", the page is refreshed to be "123"...

I am using Gulp 3.9.0 and browser-sync 2.11.1.

Please help. Thanks.

Answer 1

Thanks to @MatthewRath, I implemented it using runSequence :

gulp.task('pages-watch', function () {
    runSequence('pages', browserSync.reload);
});

gulp.watch([
    path.join(dpw.src.commonLayouts, 'layout.html'),
    dpw.src.commonPages + "/**/*.html",
    dpw.src.sitePages + "/**/*.html"
], ['pages-watch']);

But it introduces a new task, which is a bit tedious.