Question

当我运行gulp文件时，一切都按预期工作，我没有收到任何错误。但是，每当我更改SCSS文件时，终端都会显示正在运行的cleanCss，sass和autoprefixer任务，但更改不会反映在最终的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

如果您希望异步任务按顺序运行，则需要返回流。例如：

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任务在观看时未按顺序运行

1 个答案: