title: Browser sync for Angular SPA
body: <p>I'm using browser sync with an Angular SPA. Serving the site looks like this:</p>
  
  <pre><code>gulp.task('serve', function() {
    browserSync.init(null, {
      server: {
        baseDir: './',
        middleware: [historyApiFallback()]
      }
    });
  });
  </code></pre>
  
  <p>This works fine. The use of <code>historyApiFallback</code> (npm module) means browser sync doesn't freak out when going to a new URL path when all it needs to do is continue serving the <code>index.html</code>.</p>
  
  <p>The problem I have is with watching files. I've tried this:</p>
  
  <pre><code>gulp.task('watch', function() {
    watch('./src/scss/**/*.scss', function() {
      runSequence('build-css', browserSync.reload);
    });
  });
  </code></pre>
  
  <p>The watch task does work because the <code>build-css</code> task triggers fine. Then the console logs <code>Reloading Browsers...</code> and just hangs. The browser never gets the CSS injection or reload. What am I doing wrong here?</p>
  
  <p>Note that I'm using <code>gulp-watch</code> not the native gulp watch purposely.</p>