Does Gulp 3 get a build loop when checking SCSS and CSS files at the same time?

Question

gulp.js

Hi guys, please tell me how to make it so that when tracking changes in scss and css files, css
tasks are performed only after all scss-related tasks are completed. Now there is a loop at the time of working with CSS, so it starts as soon as there are changes in the css files, but work with SCSS is still in progress. I'm waiting for help.

The structure of gulp itself is complex, below I have attached the code:

The main task for tracking everything

gulp.task('all-watch', ['login'],
    function () {
        global.ignoreInitial = true;
        global.isWatching = true;
        console.log('======================================= Start ReBuild'.blue);
        gulp.run('sass-watch')
        // gulp.run('watch-source-sass')
        gulp.run('css-watch')
        gulp.run('js-watch')
        gulp.run('es-watch')
        gulp.run('img-watch')
        gulp.run('html-watch')
    })

gulp.task('default', ['all-watch'])

Tracking task in SCSS

import stylesBuilder from '../util/sassStyleBuilder';
import componentsBuilder from '../util/sassComponentsBuilder';
import rootBuilder from '../util/sassRootBuilder';
import updateFromDependency from '../util/sassUpdateFromDependency';

gulp.task('sass-watch',
    function () {
        setTimeout(function () {
            console.log('+======================================= start'.red);
            console.log('Watching SASS files started...'.green);
        }, 0);

        global.isWatching = true;

        gulp.run('watch-all-scss');
    })

scss compilation functions

// >>>>>stylesBuilder
export default function(origFile) {
    let conf = config.sass.styles;
    return gulp.src(conf.sassPath)
        .pipe(gulpif(function(file) {
            return typeof origFile == 'undefined' || origFile.event == 'change' || origFile.event == 'add';
        }, bulkSass()))
        .pipe(gulpif(function() {
            return config.sassSourceMap;
        }, sourcemaps.init()))
        .pipe(sass({ outputStyle: 'expanded' }).on('error', function(error) {
            sass.logError.call(this, error);
        }))
        .pipe(autoprefixer(config.autoprefixer))
        .pipe(rename({ dirname: '' }))
        .pipe(concat(conf.concatName))
        .pipe(gulpif(function() {
            return config.sassSourceMap;
        }, sourcemaps.write('./')))
        .pipe(gulp.dest(function(file) { return destPath({ origFile: origFile, file: file }) }));
};

// >>>>>componentsBuilder
export default function (origFile) {
    var conf = config.sass.components;
    return gulp.src(conf.sassPath)
        .pipe(gulpif(function (file) {
            return typeof origFile == 'undefined' || origFile.event == 'change' || origFile.event == 'add';
        }, bulkSass()))
        .pipe(gulpif(function () {
            return config.sassSourceMap;
        }, sourcemaps.init()))
        .pipe(sass({outputStyle: 'expanded'}).on('error', function (error) {
            sass.logError.call(this, error);
        }))
        .pipe(autoprefixer(config.autoprefixer))
        .pipe(rename({dirname: ''}))
        .pipe(gulpif(function () {
            return config.sassSourceMap;
        }, sourcemaps.write()))
        .pipe(gulp.dest(function (file) {
            console.log('Building Components'.green)
            return destPath({origFile: origFile, file: file})
        }))
};

// >>>>>>sassRootBuilder
export default function(origFile) {
    let conf = config.sass.index;
    return gulp.src(conf.sassPath)
        .pipe(gulpif(function(file) {
            return typeof origFile == 'undefined' || origFile.event == 'change' || origFile.event == 'add';
        }, bulkSass()))
        .pipe(gulpif(function() {
            return config.sassSourceMap;
        }, sourcemaps.init()))
        .pipe(sass({ outputStyle: 'expanded' }).on('error', function(error) {
            sass.logError.call(this, error);
        }))
        .pipe(autoprefixer(config.autoprefixer))
        .pipe(rename({ dirname: '' }))
        .pipe(gulpif(function() {
            return config.sassSourceMap;
        }, sourcemaps.write()))
        .pipe(gulp.dest(function(file) { return destPath({ origFile: origFile, file: file }) }));
};

A task that watches for changes in CSS

gulp.task('watch-css', ['login'], () => {
    var conf = config.css,
        indervalId;
    setTimeout(function () {
        console.log('Watching CSS files started...'.green);
    }, 0);
    return watch(conf.path, {ignoreInitial: global.ignoreInitial}, function (file) {
        if (!conf.disableSourceUploading || file.path.indexOf(conf.cssOptimiserFileName) > -1) {
            fileActionResolver(file);
        } else {
            console.log('Uploading prevented because value disableSourceUploading:true'.yellow);
        }
        if (conf.enableMinification && file.path.indexOf(conf.cssOptimiserFileName) == -1 && !indervalId) {
            indervalId = setInterval(function () {
                if (queueInstance.queueLenght() == 0) {
                    indervalId = clearInterval(indervalId);
                    // cssMinificator();
                }
            }, 1500)
        }
    })
});

gulp.task('css-watch', ['login'],
    function () {
        global.isWatching = true;

        gulp.run('watch-css');
    })

Answer 1

In the third version, you can use the gulp-sequence package to execute tasks sequentially.