Question

我试图在gulp 4中构建一个有点复杂的工作流程，本质上，我想每次运行“默认” gulp任务时一次接一个地运行5个任务（请参阅下面的任务列表）；但是我遇到了一些错误，如果我手动一个接一个地运行它们，一切都很好，但是如果我运行“默认”任务，似乎大吃一惊并没有结束所有任务，它会在任务4处停止但是结果里面并没有连在一起，并且完全错过了任务5，即使在bash中说“完成”。我认为问题在于执行时间。

任务列表：

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

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

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

4。任务4：组合“ 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系列，请参考以下链接：

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

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

2 个答案: