Gulp 任务在被观看时未按顺序运行

Question

当我运行我的 gulp 文件时，一切都按预期工作，我没有收到任何错误。但是，每当我对 SCSS 文件进行更改时，终端都会显示 cleanCss、sass 和 autoprefixer 任务运行ning，但更改不会反映在最终 CSS 文件。

我经历了一切，想不出为什么会这样。我能想到的任务运行乱序了，但我不明白为什么它们运行在第一个运行上很好，但在随后的运行上却不行.这是我的一些代码：

// default gulp task
gulp.task('default', ['cleanCss', 'cleanJs', 'cleanImg', 'sass', 'scripts', 'imagePro', 'autoprefixer', 'watch']);

//watch for changes
gulp.task('watch', function() {
    gulp.watch('./assets/img/*', ['cleanImg', 'imagePro']);
    gulp.watch('./assets/js/*.js', ['cleanJs', 'scripts']);
    gulp.watch('./assets/sass/bootstrap/*.scss', ['cleanCss', 'sass', 'autoprefixer']);
});

//
//Compile scss to css
//
gulp.task('sass', ['cleanCss'], function () {
  gulp.src('./assets/sass/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    // .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('./assets/css'));
});

//
// Post Process CSS
//

// Add Vendor Prefixes
gulp.task('autoprefixer', ['cleanCss', 'sass'], function() {
  gulp.src('./assets/css/*.css')
    .pipe(sourcemaps.init())
    .pipe(postcss([ autoprefixer({ browsers: ['last 2 versions'] }) ]))
    .pipe(sourcemaps.write('.'))
    .pipe(gulp.dest('./assets/build/css'));
});

Answer 1

如果您希望您的异步任务运行为了您需要 return 流。示例：

gulp.task('sass', ['cleanCss'], function () {
  return gulp.src('./assets/sass/*.scss')
    .pipe(sass.sync().on('error', sass.logError))
    // .pipe(sass({outputStyle: 'compressed'}))
    .pipe(gulp.dest('./assets/css'));
});

查看 https://github.com/gulpjs/gulp/blob/master/docs/API.md

中的异步任务支持文档

Gulp 任务在被观看时未按顺序运行

Gulp tasks not running in order while being watched

gulp

gulp-watch

Gulp 任务在被观看时未按顺序 运行

Gulp tasks not running in order while being watched

gulp

gulp-watch

Gulp 任务在被观看时未按顺序运行