CODEWITHSUNDEEP
gulp
Morad Hamdy
Morad Hamdy

Reputation: 115

After changing from gulp v3 to v4, gulp.series isn't running all tasks applied

After migration from gulp v3 to v4, i have to exchange the use of run-sequence plugin with the new methods provided by gulp v4 which are series and parallel. But i have found that not all the tasks is applied after this exchange.

I have followed tutorials to transform between run-sequence use and series and parallel methods provided by gulp 4, but as i said not all tasks is applied.

Here is the original gulpfile.js code with gulp v3:

// Multi watch
gulp.task( "watchChanges" , function() { // tasks done before watch
    gulp.watch( sourceFolder + "/scss/**/*.scss" , ["sass"] ); // src , task name
    gulp.watch( sourceFolder + "/*.html" , browserSync.reload ); // watch html (src)
    gulp.watch( sourceFolder + "/js/**/*.js" , browserSync.reload ); // watch js (src)
});

gulp.task( "default" , function( callback ) {
    runSequence( [ "sass" , "browserSync" ] , "watchChanges" ,
        callback
    )
});

And here is the code transform i have applied for gulp v4:

// Multi watch
gulp.task( "watchChanges" , function() { // tasks done before watch
    gulp.watch( sourceFolder + "/scss/**/*.scss" , gulp.series( "sass" ) ); // src , task name  
    gulp.watch( sourceFolder + "/*.html" ).on( "change" , browserSync.reload ); // watch html (src)
    gulp.watch( sourceFolder + "/js/**/*.js" ).on( "change" , browserSync.reload ); // watch js (src)
});

// default task
gulp.task( "default" , gulp.series( gulp.parallel( "sass" , "browserSync" ) , "watchChanges" ) );

And for the usage of sass and browserSync are as following:

// sass task
gulp.task( "sass" , function() {
    return gulp.src( sourceFolder + "/scss/**/*.scss" ) // source
        .pipe( sourcemaps.init() ) // sourcemaps init
        .pipe( sass({ outputStyle: "compressed" }).on( "error" , sass.logError ) ) // define plugin
        .pipe( sourcemaps.write("./sourcemaps") ) // sourcemaps write
        .pipe( gulp.dest( sourceFolder + "/css" ) ) // destination
        .pipe( browserSync.stream() ); // injecting css in browser
});

// browserSync task
gulp.task( "browserSync" , function() {
    browserSync.init({
        server: {
            baseDir: sourceFolder
        }
    });
});

For the use of gulp v3, the tasks run normally in a sequence of sass - browserSync - watchChanges, but after making the change with gulp v4, just sass and browserSync run but for watchChanges it doesn't run!

but if i tried gulp sass browserSync watchChanges, all these tasks will run correctly!

I hope if i have an explanation and a solution of why this happens.

Upvotes: 0

Views: 1039

Answers (1)

Mark
Mark

Reputation: 182591

Try:

// browserSync task
gulp.task( "browserSync" , function(done) {
    browserSync.init({
        server: {
            baseDir: sourceFolder
        }
    });
    done();
});

Because you did not signal the completion of the browserSync task, gulp is unable to know to move on the next task. The done in the above code does that.

Upvotes: 1

Related Questions