В Gulp 3 происходит зацикливание при сборке когда одновременно выполняется проверка SCSS и CSS файлов?

Question

[Пащук Илья]

Привет ребята, подскажите пожалуйста как сделать так чтобы при слежении за изменением файлов scss и css
задачи по работе с css выполнялись только после того как выполняться все задачи связанные с scss. Cейчас происходит зацикливание в момент работы с CSS, так запускаеться сразу как появились изменения в файлах css, но еще выполняется работа с SCSS. Жду помощи.

Cама структура gulp сложная, ниже я прикрепил код:

Главный таск по слежению за всем

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'])

Таск по слежению за в 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

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

Таск который следит за изменениями в 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

[Сергей delphinpro]

В третьей версии можно использовать пакет gulp-sequence для последовательного выполнения тасков.