Gulp tasks not running in order while being watched

Question

When I run my gulp file everything works as expected and I receive no errors. However, whenever I make changes to the SCSS files, the terminal shows the cleanCss, sass, and autoprefixer tasks running but the changes are not reflected in the final CSS file.

I have gone through everything and can't come up with why this is happening. The tasks running out of order is all I can think of but I can't figure out why they run fine on the first run but not on subsequent runs. Here's some of my code:

// 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

If you want your asynchronous tasks to run in order you need to return the stream. Example:

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

Check the docs for Async task support in https://github.com/gulpjs/gulp/blob/master/docs/API.md