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

Question

我想运行 gulp-sass 然后检查生成的 css 文件的大小是多少。

如果我的 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']);
  gulp.watch(buildPath+'css/style.css', ['css.size']);
});

我最终陷入了构建 css 文件的永无止境的困境，显然是因为 css.size 任务必须等待 sass 任务完成。如果我错了，请纠正我。对我来说这没有意义，但我没有找到任何其他解释，特别是因为如果我评论 style.css watch 任务，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 任务设为 return 流。像这样：

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 之前的 return。这样，css.size 任务就会知道 sass 任务何时完成，并在它之后开始。

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

How to make Gulp wait until dest file is finished?

javascript

gulp

gulp-sass