Gulp 4 Run task one after another - gulp-4

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

Answer 1

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

Answer 2

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