title: Browser-sync is not refreshing files observed by gulp-watch
body: <p>In my build process I want to put the artifacts of the build steps into <code>.tmp/serve</code> directory. </p>
  
  <p>I managed to set up <code>gulp-watch</code> to fire specific tasks when I modify files in my working directory. E.q. when I modify htmls, they are built and the artifacts are pasted into desired <code>.tmp/serve</code> directory</p>
  
  <p>I'm having problems with reloading the files from <code>.tmp/serve</code> with <code>browser-sync</code>. When I save changes in my working directory multiple times, <code>browser-sync</code> refreshes only the previous changes (<strong>1 change delay</strong>). I guess the <code>reload</code> function fires before <code>gulp-dest</code> finishes. Note that if I refresh browser manually the <strong>current</strong> changes appear.</p>
  
  <p>Am I doing something wrong?</p>
  
  <p>Build htmls task</p>
  
  <pre><code>gulp.task('html', ['styles'], () =&gt; {
    return gulp.src('app/*.html')
      .pipe($.if('*.html', $.minifyHtml({conditionals: true, loose: true})))
      .pipe(gulp.dest('.tmp/serve'))
      ;
  });
  </code></pre>
  
  <p>Sever task</p>
  
  <pre><code>const reload = browserSync.reload;
  
  gulp.task('serve', ['styles', 'fonts', 'build:scripts', 'html', 'images'], () =&gt; {
    browserSync({
      notify: false,
      port: 9000,
      server: {
        baseDir: ['.tmp/serve'],
        routes: {
          '/bower_components': 'bower_components'
        }
      }
    });
  
    /***********  SEE THE LINES BELOW  **************/
    gulp.watch([
      '.tmp/serve/**/*',
    ]).on('change', reload);
  
    gulp.watch('app/styles/**/*.scss', ['styles']);
    gulp.watch('app/fonts/**/*', ['fonts']);
    gulp.watch('app/*.html', ['html']);
    gulp.watch('app/scripts/**/*', ['build:scripts']);
    gulp.watch('bower.json', ['wiredep', 'fonts']);
  });
  </code></pre>