How to solve a problem with Gulp?

Question

HTML

I use Gulp + SASS to convert SCSS to CSS. Created a task in gulpfile.js that "monitors" changes to SCSS files.
But there's a problem.
When I change the SCSS file, the most recent changes do not appear in the compiled CSS file, only the previous changes remain . You have to compile twice.
The gulpfile.js itself is here:

gulp.task('sass', function() {
    return gulp.src([
        './'+dirs.src+'/app/**/*.scss',
        './'+dirs.src+'/app/**/*.sass',
        '!./'+dirs.src+'/app/bower_components/'
    ])
        .pipe(plugins.sass({
            outputStyle: 'pretty',
            precision: 8,
            includePaths: [
                './'+dirs.src+'/app/'
            ]
        })
            .on('error', plugins.sass.logError))
        .pipe(gulp.dest('./'+dirs.src+'/app/'));
});

gulp.task('css:single', ['css:single-clean'], function() {
    return gulp.src([
        './'+dirs.src+'/app/!(bower_components)**/*.css',
        './'+dirs.src+'/app/main.css',
    ])
        .pipe(plugins.concatcss('app.css'))
        .pipe(plugins.cssnano({
            discardComments: {
                removeAll: true
            }
        }))
        .pipe(gulp.dest('./'+dirs.src+'/app/'));
});

gulp.task('css:single-clean', function() {
    return del('./'+dirs.src+'/app/app.css');
});

gulp.task('sass:watch', ['sass', 'css:single'], function() {
    return gulp.watch([
        './'+dirs.src+'/app/**/*.scss',
        './'+dirs.src+'/app/**/*.sass'
    ], ['sass', 'css:single']);
});

Tell me, what's wrong? So that I can immediately receive in CSS all the changes that I make to the SCSS file.

Answer 1

in watcher, the css:single task is launched in parallel with the sass task, but it needs to be sequential