title: Wrong reload order when using Gulp and browserSync
body: <p>So I'm trying to compile pug (jade), javascript and sass files with Gulp V4, and using browserSync to reload the browser when any of these files change. There are a lot of guides out there, but no matter which way I write the code, it just doesn't seem to get the task order right. Im using <code>gulp.series</code> to set the task order, but browserSync doesn't want to play ball.</p>
  
  <p>Here's a print of my Gulp file:</p>
  
  <pre><code>var gulp = require('gulp'),
  ... etc.
  
  var paths = {
      sass: ['src/scss/**/*.scss'],
      js:   ['src/js/**/*.js'],
      pug:  ['src/**/*.pug']
  };
  
  // Shared Tasks:
  //*------------------------------------*/
  
  gulp.task('clean', function(done){
      del(['dist/assets/**/*.css', 'dist/assets/**/*.map', 'dist/assets/**/*.js']);
      done();
  });
  
  // App Specific Tasks:
  //*------------------------------------*/
  
  // Sass
  gulp.task('build-sass', function(){
      gulp.src(paths.sass)
          return sass(paths.sass, {
              style: 'expanded'
          })
          .on('error', sass.logError)
          .pipe(prefix('last 2 version', '&gt; 1%', 'ie 8', 'ie 9'))
          .pipe(sourcemaps.write())
          .pipe(gulp.dest('dist/assets/css'))
          .pipe(cleanCSS({ advanced: false, keepSpecialComments: 0 }))
          .pipe(rename({suffix: '.min'}))
          .pipe(gulp.dest('dist/assets/css'));
  });
  
  // JS
  gulp.task('build-js', function(done){
      gulp.src(paths.js)
          .pipe(concat('all.js'))
          .pipe(gulp.dest('dist/assets/js'))
          .pipe(rename({suffix: '.min'}))
          .pipe(uglify())
          .pipe(gulp.dest('dist/assets/js'))
          done();
  
  // Pug
  gulp.task('build-pug', function buildHTML(done){
      gulp.src(['src/**/*.pug'], {
          base: 'src'
      })
      .pipe(pug())
      .pipe(gulp.dest('./dist/'))
      done();
  });
  
  
  // Service Tasks:
  //*------------------------------------*/
  
  // Delete the compiled views dir.
  gulp.task('remove', function(done){
      del(['dist/views/**/']);
      done();
  });
  
  // Serve the site locally and watch for file changes
  gulp.task('serve', function(done){
      browserSync.init({
          server: {
              baseDir: './dist/',
              notify: false,
              open: false
          }
      });
  
     // Watch &amp; Reload Pug Files
     gulp.watch([paths.pug], gulp.series('build-pug')).on('change', browserSync.reload);
     // Watch &amp; Reload Sass Files
     gulp.watch([paths.sass], gulp.series('build-sass')).on('change', browserSync.reload);
  });
  
  
  gulp.task('default', gulp.series('clean', 'build-sass', 'build-js', 'build-pug', 'remove', 'serve', function(done){
      done();
  }));
  </code></pre>
  
  <p>And the terminal console log outputs this when starting gulp:</p>
  
  <pre><code>$ gulp
  [13:09:33] Using gulpfile ~/Dropbox Aaron/Dropbox (Personal)/01_Me/01_Dev/01_My Work/*Template/gulpfile.js
  [13:09:33] Starting 'default'...
  [13:09:33] Starting 'clean'...
  [13:09:33] Finished 'clean' after 2.64 ms
  [13:09:33] Starting 'build-sass'...
  [13:09:33] Finished 'build-sass' after 443 ms
  [13:09:33] Starting 'build-js'...
  [13:09:33] Finished 'build-js' after 4.42 ms
  [13:09:33] Starting 'build-pug'...
  [13:09:33] Finished 'build-pug' after 3.15 ms
  [13:09:33] Starting 'remove'...
  [13:09:33] Finished 'remove' after 656 μs
  [13:09:33] Starting 'serve'...
  [BS] Access URLs:
  -------------------------------------
        Local: http://localhost:3000
     External: http://10.130.91.51:3000
  -------------------------------------
           UI: http://localhost:3001
  UI External: http://10.130.91.51:3001
  -------------------------------------
  [BS] Serving files from: ./dist/
  </code></pre>
  
  <p>And this when I change a file within the watched files:</p>
  
  <pre><code>[BS] File changed: src/scss/4_elements/_elements.page.scss
  [13:12:33] Starting 'build-sass'...
  [13:12:34] write ./style.css
  [13:12:34] Finished 'build-sass' after 366 ms
  </code></pre>
  
  <p>So what seems to me to be happening in this instance, the file is changing, browserSync reloads the page, and then 'build-sass' starts. Which is the wrong way round. I obviously want to build the sass, then reload the page. I have to save 2 times for the browser to refresh the code I want.</p>
  
  <p>Some of the code I've used is directly from the browserSync documentation: </p>
  
  <p><a href="https://www.browsersync.io/docs/gulp#gulp-reload" rel="nofollow">https://www.browsersync.io/docs/gulp#gulp-reload</a></p>
  
  <p>This doesn't seem to work.</p>