1

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

任务清单：

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

2. 任务2： concat和压缩“src/vendors/pending”里面的所有js并push到“src/vendors/ready”；连接名称结果：“vendors.min.js”

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

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'));
4

2 回答 2

0

实现这一目标的最佳方法是使用 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('./'));
    });
}));
于 2019-10-10T10:58:31.157 回答
0

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

于 2019-01-31T10:25:34.663 回答