I'm trying to create a gulp workflow that includes nodemon, typescript, and browsersync. When I try to reload the browser with browsersync the browser reloads before the express server has had a chance to finish creating routes, etc. So in the end I have to reload the browser manually anyway (f5). I have tried to use gulp-nodemon events, gulp.watch(), and gulp-nodemon tasks in the config. All to no avail. I'm thinking that if it's possible, I can notify nodemon that Express is ready and manually trigger the page load or maybe even notify browsersync in the browser from express to reload the page.

for simplicity here is a small version of my gulpfile:

const browser = require('browser-sync');

gulp.task('typescript', function(){
  return gulp.src(config.src + '/**/*.ts')
    .pipe(tsProject())
    .pipe(gulp.dest(config.dist));
});

gulp.task('server', function (done) {

    // Create nodemon instance
    $.nodemon({
        script: config.dist + '/app.js',
        watch: config.src + '/**/*',
        ext: '*.*',
        env: {
            'NODE_ENV': 'development'
        },
        tasks: ['typescript'] 
    }).on('start',function(done){
        browser.reload();
    });
    done();
});

gulp.task('sync', function (done) {
     // Init browser-sync
    browser.init({
        port: 3000,
        proxy: 'localhost:8000'
    });
    done();
};

gulp.task('default', gulp.series(clean, 'typescript', 'server', 'sync'));

For the most part everything works. TypeScript transpiles, Nodemon starts serving the Express app, and BrowserSync launches successfully. On changes the Typescript transpiles, Nodemon restarts the Express app, and BrowserSync reloads. The problem is BrowserSync reloads before Express has a chance to start listening for connections. Any suggestions?