title: BrowserSync refreshing before injection (Gulp)
body: <p>I have my gulpfile:</p>
  
  <pre><code>var gulp = require('gulp');
  var sass = require('gulp-sass');
  var watch = require('gulp-watch');
  var sourcemaps = require('gulp-sourcemaps');
  var fileinclude = require('gulp-file-include');
  var browserify = require('browserify');
  var rename = require('gulp-rename');
  var streamify = require('gulp-streamify'); // required for uglify
  var uglify = require('gulp-uglify'); // minify JS
  var source = require('vinyl-source-stream'); // required to dest() for browserify
  var browserSync = require('browser-sync').create();
  var localSettings = require('./gulp/localConfig.js');
  
  gulp.task('sass', function () {
      return gulp.src('./assets/sass/main.scss')
      .pipe(sourcemaps.init())
          .pipe(sass().on('error', sass.logError)) // .on('error', sass.logError) prevents gulp from crashing when saving a typo or syntax error
      .pipe(sourcemaps.write())
      .pipe(gulp.dest('./assets/sass'))
      .pipe(browserSync.stream()); // causes injection of styles on save
  });
  
  gulp.task('compileHTML', function() {
      return gulp.src(['static/src/*.html'])
          .pipe(fileinclude({
              prefix: '@@',
              basepath: '@root'
          }))
          .pipe(gulp.dest('./static/compiled'))
          .pipe(browserSync.stream()); // causes injection of html changes on save
  });
  
  // Static Server for browsersync
  gulp.task('sync', ['sass'], function() {
      browserSync.init({
          startPath: "static/compiled/index.html",
          open: localSettings.openBrowserSyncServerOnBuild,
          server: {
              baseDir: "./",
          }
      });
  });
  
  gulp.task('watch', function() {
      gulp.watch('./assets/sass/**/*.scss', ['sass']);
      gulp.watch(['./static/src/**/*.html', '!partials', '!components'], ['compileHTML']);
      gulp.watch('./assets/js/**/*.js', ['javascript']);
  });
  
  gulp.task('javascript', function() {
      var bundleStream = browserify('./assets/js/main.js').bundle();
  
      bundleStream
          .pipe(source('main.js'))
          .pipe(rename('bundle.js'))
          .pipe(gulp.dest('./assets/js/'))
          .pipe(browserSync.stream());
  })
  
  // Default Task
  gulp.task('default', ['compileHTML', 'javascript', 'sass', 'watch', 'sync']);
  </code></pre>
  
  <p>Mostly everything with my build works great, however I am having one issue with my compileHTML task. When any modifications are made to my html, it is compiled and injected into the page with BrowserSync. The problem is that BrowserSync is injecting the markup into the page AFTER it reloads, so that I have to manually refresh or save the file again.</p>
  
  <p>Although I am doing the exact same thing with my SASS task, I have no problems with that task. Why do my styles inject into the page before the reload, but the HTML does not?</p>
  
  <p>Just for testing, I tried adding a setTimout surrounding the BrowserSync injection, but it did not affect the timing of the injection other than adding a delay.</p>