title: Gulp watch - execute tasks in order (synchronous)
body: <p>I have a series of tasks to be run from a watcher but I can get them to fire in order:</p>
  
  <p>Here is the gulp tasks and watcher.</p>
  
  <pre><code>gulp.task('app_scss', function(){
      return gulp.src(appScssDir + '/main.scss')
          .pipe(sass({ style: 'compressed' }).on('error', gutil.log))
          .pipe(autoprefix('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
          .pipe(gulp.dest(appBuilderDir));
  });
  
  gulp.task('app_vendor_css', function(){
      return gulp.src(appProviderCssDir + '/*.css')
          .pipe(minifyCSS({ keepSpecialComments: 0 }))
          .pipe(concat('app_vendor.css'))
          .pipe(gulp.dest(appBuilderDir));
  
  });
  
  gulp.task('app_build_css', function(){
      return gulp.src(appBuilderDir + '/*.css')
          .pipe(concat('style.css'))
          .pipe(gulp.dest(targetCssDir));
  });
  
  
  gulp.task('watch', function () {
      gulp.watch(appScssDir + '/**/*.scss', ['app_scss', 'app_build_css']);
  });
  
  gulp.task('default', ['app_build_clean', 'app_scss', 'app_vendor_css', 'app_build_css', 'watch']);
  </code></pre>
  
  <p>So when I update a scss file it should compile them create a single css file. Then the build task concats the file with the vendor files. But every time I save a file its always one step behind. See the video as an example: <a href="http://screencast.com/t/065gfTrY">http://screencast.com/t/065gfTrY</a> </p>
  
  <p>I have renamed the tasks, changed the order in the watch callback etc.</p>
  
  <p>Am I making a obvious mistake? </p>