Gulp 4 一个接一个地运行任务

Question

我正在尝试在 gulp 4 中构建一个有点复杂的工作流程，基本上我希望每次运行“默认”gulp 任务时一个接一个地运行 5 个任务（请参阅下面的任务列表）；但是我遇到了一些错误，如果我手动运行它们，一切正常，但是如果我运行“默认”任务，似乎 gulp 变得疯狂并且没有结束所有任务，它停止在任务 4，但结果里面没有 concat，完全错过了任务 5，即使在 bash 中说“完成”。我认为问题在于执行时间。

任务列表：

1.任务 1： 将供应商从“node_modules/vendor 文件夹”拉入“src/vendors/pending”（我知道没有必要拉出供应商，但我有我的理由）

2。任务2： concat并压缩“src/vendors/pending”中的所有js并推送到“src/vendors/ready”；连接名称结果：“vendors.min.js”

3。任务 3： 编译压缩我的 es6 脚本并推送到“src/requests/pending”；编译名称结果：“main.min.js”

4.任务4： concat "vendors.min.js" 和 "main.min.js" 并推入"src/request/ready" 编译名结果："frontend.min.js"

5.任务 5： 创建地图并将“frontend.min.js”推送到“assets/js”文件夹中

默认任务：

gulp.task('default', gulp.series('task1', 'task2', 'task3, 'task4', 'task5' ));

有没有办法让一个任务依赖于另一个任务，只有在前一个任务结束时才开始下一个任务？

我尝试用“setTimeout 函数”包装所有任务，并且似乎可以工作，但我不太喜欢它，我正在寻找可以逐步运行的东西。

这里是 gulp 文件：

var gulp         = require( 'gulp' );
const { src, dest, task, watch, series, parallel } = require('gulp');

// JS related plugins
var concat       = require( 'gulp-concat' );
var uglify       = require( 'gulp-uglify' );
var babelify     = require( 'babelify' );
var browserify   = require( 'browserify' );
var source       = require( 'vinyl-source-stream' );
var buffer       = require( 'vinyl-buffer' );
var stripDebug   = require( 'gulp-strip-debug' );

// Utility plugins
var rename       = require( 'gulp-rename' );
var sourcemaps   = require( 'gulp-sourcemaps' );
var notify       = require( 'gulp-notify' );
var plumber      = require( 'gulp-plumber' );
var options      = require( 'gulp-options' );
var gulpif       = require( 'gulp-if' );

// Browers related plugins
var browserSync  = require( 'browser-sync' ).create();

// js
var jsFront      = 'main.js';
var jsFiles      = [ jsFront ];



// Tasks
function browser_sync() {
    browserSync.init({
        server: {
            baseDir: './assets/'
        }
    });
}

function reload(done) {
    browserSync.reload();
    done();
}


function vendorsFront(done) {
    gulp.src([
        './node_modules/jquery/dist/jquery.js',
        './node_modules/animejs/lib/anime.min.js',
    ])
        .pipe(gulp.dest( './src/vendors/pending/frontend' ));
    console.log(0);
    done();
};

function vendorsFrontReady(done) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            gulp.src([
                './src/vendors/pending/frontend/**/*.js'
            ])
                .pipe(concat('vendors.js'))
                .pipe( rename( {
                    extname: '.min.js'
                } ) )
                .pipe( uglify() )
                .pipe(gulp.dest( './src/vendors/ready/frontend' ));
            console.log(1);
            done();
        }, 1000)

        resolve();
    });
};


function js(done) {
    jsFiles.map( function( entry ) {
        return browserify({
            entries: ['./src/scripts/' + entry]
        })
        .transform( babelify, { presets: [ '@babel/preset-env' ] } )
        .bundle()
        .pipe( source( entry ) )
        .pipe( rename( {
            extname: '.min.js'
        } ) )
        .pipe( buffer() )
        .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
        .pipe( uglify() )
        .pipe( dest( './src/requests/pending' ) )
        .pipe( browserSync.stream() );
    });
    console.log(2);
    done();
};


function concatVendorScripts(done) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            return gulp.src([ './src/vendors/ready/frontend/**/*.js', './src/requests/pending/main.min.js' ])
            .pipe( buffer() )
            .pipe(concat('frontend.js'))
            .pipe( rename( {
                extname: '.min.js'
            } ) )
            .pipe( gulpif( options.has( 'production' ), stripDebug() ) )
            .pipe( dest( './src/requests/ready' ) )
            console.log(3);
            done();
        }, 4000)

        resolve();
    });
};

function moveJs(done) {
    return new Promise(function(resolve, reject) {
        setTimeout(function() {
            return gulp.src('./src/requests/ready/*')
            .pipe(sourcemaps.init({loadMaps: true}))
            .pipe( sourcemaps.write( '.' ) )
            .pipe(gulp.dest('./assets/js/' ));
            console.log(4);
            done();
        }, 5000)

        resolve();
    });
};



function triggerPlumber( src_file, dest_file ) {
    return src( src_file )
        .pipe( plumber() )
        .pipe( dest( dest_file ) );
}

task("vendorsFront", vendorsFront);
task("vendorsFrontReady", vendorsFrontReady);
task("concatVendorScripts", concatVendorScripts);
task("moveJs", moveJs);

gulp.task('default', gulp.series('vendorsFront', 'js','vendorsFrontReady', 'concatVendorScripts', 'moveJs'));

Answer 1

您可以使用 Gulp 4 系列，请参考以下链接： https://fettblog.eu/gulp-4-parallel-and-series/

Answer 2

实现这一目标的最佳方法是使用 Promise，创建一个任务并使用如下所示的 Promise

gulp.task('compile-code', gulp.series(function () {
    return Promise.all([
        new Promise(function (resolve, reject) {
            gulp.src([
                './src/services/*.js',
                './src/directives/directive.js'])
                .pipe(concat('bundle.js'))
                .on('error', reject)
                .pipe(gulp.dest('./'))
                .on('end', resolve);
        }),
        new Promise(function (resolve, reject) {
            gulp.src(['./src/assets/css/*.css'])
                .pipe(concat('style.css'))
                .pipe(gulp.dest('assets/css'))
                .on('error', reject)
                .pipe(gulp.dest('./'))
                .on('end', resolve);
        }),
        new Promise(function (resolve, reject) {
            gulp.src(['./src/assets/img/*'])
                .on('error', reject)
                .pipe(gulp.dest('assets/img'))
                .on('end', resolve);
        }),
        new Promise(function (resolve, reject) {
            gulp.src(['./src/views/*.html'])
                .on('error', reject)
                .pipe(gulp.dest('views/'))
                .on('end', resolve);
        }),
        new Promise(function (resolve, reject) {
            gulp.src(['./src/robots.txt'])
                .on('error', reject)
                .pipe(gulp.dest('./'))
                .on('end', resolve);
        })
    ]).then(function () {
        gulp.src('/index.html')
            .pipe(browserSync.reload({
                stream: true
            }))
            .pipe(gulp.dest('./'));
    });
}));