如何让Gulp等到dest文件完成？

Question

我想运行gulp-sass并在检查之后生成的css文件的大小是多少.

如果我在gulpfile中有以下内容:

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']);
});

我最终陷入了构建css文件的永无止境的困境,显然是因为css.size任务必须等待sass任务完成.如果我错了,请纠正我.对我来说它没有意义,但我没有找到任何其他解释,特别是因为如果我评论style.css监视任务,sass任务只运行一次,如预期的那样.

现在,如果我像这样修改gulp文件:

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']);
});

或者像这样

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']);
});

我得到了错误的结果.该文件显然尚未编译,我得到旧文件的文件大小.

我应该如何安排我的任务,以便获得新建的css文件的文件大小？

Answer 1

让您的sass任务返回流.像这样:

gulp.task('sass', function () {
  return 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.这样,css.size任务将知道任务何时sass完成,并在任务结束后开始.