Gulp 4 Run task one after another

Question

I'm trying to build a bit complex workflow in gulp 4, essentially I would like to run 5 tasks one after another every time I run the "default" gulp task (see tasks list below); but I have experienced some bugs, if I run them one by one manually, all works good, but if I run the "default" task, it seems gulp going crazy and didn't end all the tasks, it stop at task 4, but the result has no concat inside, and miss completely the task 5, even if in the bash said "finished". I think the problem is the time execution.

Tasks list:

1. Task 1: pull vendors from "node_modules/vendor folder" into "src/vendors/pending" (I know isn't necessary pull out vendors, but I have my reasons)

2. Task 2: concat and compressing all js inside "src/vendors/pending" and push into "src/vendors/ready"; concat name result: "vendors.min.js"

3. Task 3: compiling and compressing my es6 script and push into "src/requests/pending"; compiling name result: "main.min.js"

4. Task 4: concat "vendors.min.js" and "main.min.js" and push into "src/request/ready" compiling name result: "frontend.min.js"

5. Task 5: create map and push "frontend.min.js" into "assets/js" folder

default task:

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

Is there a way to make a task dependent on another and start next task only if the previous task has ended?

I tried wrapping all tasks with a "setTimeout function", and seems to work, but I don't like it very much, I'm looking for something that can run step by step.

Here the gulp file:

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

Show us your gulpfile.js. Are you signaling task termination for all the tasks? — Mark, Jan 29 '19 at 16:36
Please refer this: https://stackoverflow.com/questions/22824546/how-to-run-gulp-tasks-sequentially-one-after-the-other — Mebin Joe, Jan 30 '19 at 13:53
@MebinJoe I have already read that post, but does not solve the problem in gulp4, it refers to the syntax of gulp3 — Areon, Jan 31 '19 at 08:41

score 0 · Answer 1 · answered Jan 31 '19 at 10:25

0

you may use Gulp 4 series, please refer below link: https://fettblog.eu/gulp-4-parallel-and-series/

answered Jan 31 '19 at 10:25

Mebin Joe

2,172
4
16
22

I did it in the default task I call all the others in series, they should be executed one after the other, but at the time of concatenation (task 4) gulp gives me error because it can not find the files to concatenate, probably because they are not still been generated, if I put a setTimeout, and then set a delay, everything works .. but I would like to avoid setting a delay and starting the next task only when the previous task has finished – Areon Jan 31 '19 at 13:03

score 0 · Answer 2 · answered Oct 10 '19 at 10:58

The best way to achieve this was using Promise, create one task and use promise as below

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 Run task one after another

2 Answers2