title: How to make Gulp wait until dest file is finished?
body: <p>I want to run gulp-sass and after that check, what is the size of the generated css file.</p>
  
  <p>If I have the following in my gulpfile:</p>
  
  <pre><code>gulp.task('sass', function () {
  
    gulp.src('src/scss/style.scss')
      .pipe(sass.sync().on('error', sass.logError))
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest(buildPath+'css'))
      .pipe(connect.reload());
  });
  
  gulp.task('css.size', ['sass'], function() {
    gulp.src(buildPath+'css/style.css')
        .pipe(filesize())
  })
  
  gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
  
    gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
    gulp.watch('./src/**/*.scss', ['sass']);
    gulp.watch(buildPath+'css/style.css', ['css.size']);
  });
  </code></pre>
  
  <p>I end up in the never ending limbo of building css file, apparently because the css.size task has to wait for the sass task to finish. Correct me if I am wrong. For me it does not make sense, but I have not found any other explanation, especially because if I comment the style.css watch task, the sass task is ran only once, as expected.</p>
  
  <p>Now, if I modify the gulpfile like this:</p>
  
  <pre><code>gulp.task('sass', function () {
  
    gulp.src('src/scss/style.scss')
      .pipe(sass.sync().on('error', sass.logError))
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest(buildPath+'css'))
      .pipe(connect.reload());
  });
  
  gulp.task('css.size', ['sass'], function() {
    gulp.src(buildPath+'css/style.css')
        .pipe(filesize())
  })
  
  gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
  
    gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
    gulp.watch('./src/**/*.scss', ['sass', 'css.size']);
  });
  </code></pre>
  
  <p>or like this</p>
  
  <pre><code>gulp.task('sass', function () {
  
    gulp.src('src/scss/style.scss')
      .pipe(sass.sync().on('error', sass.logError))
      .pipe(sass({outputStyle: 'expanded'}))
      .pipe(gulp.dest(buildPath+'css'))
      .pipe(connect.reload());
    gulp.src(buildPath+'css/style.css')
        .pipe(filesize())
  });
  
  gulp.task('default', ['clear','copy', 'sass', 'connect'], function() {
  
    gulp.watch(['./src/**/*.js', './src/*/**.html'], ['copy', 'reload']);
    gulp.watch('./src/**/*.scss', ['sass']);
  });
  </code></pre>
  
  <p>I get the wrong results. The file is apparently not compiled yet and I get the file size of the old file.</p>
  
  <p>How should I arrange my tasks so I could get the file size of freshly built css file?</p>