In Gulp 4 should I now use .series() instead of .pipe()?

239 Views Asked by At

In gulp version 4 should I now use series() instead of pipe()? For example; my v3 task is below, should I change it to the last bit of code I've pasted? Is that the new gulp v4 way of doing things?

gulp.task('mytask', function() {
    return gulp.src([
        'scripts/a.js',
        'scripts/b.js',
        'scripts/c.js',
    ])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./scripts'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./scripts'));
});

New v4 way???

gulp.task('mytask', function() {
    return gulp.src([
        'scripts/a.js',
        'scripts/b.js',
        'scripts/c.js',
    ])
        .series(
            concat('all.js'), 
            gulp.dest('./scripts'), 
            rename('all.min.js'), 
            uglify(), 
            gulp.dest('./scripts')
        );
});
1

There are 1 best solutions below

3
Rich Dougherty On

In Gulp 4, series is used to run multiple tasks one after another, whereas pipe is used to transform a stream within a single task.

So you would change your task code to look like the following. The updated code returns a stream made with src and piped through some transformations.

exports.mytask = function() {
    return gulp.src([
            'scripts/a.js',
            'scripts/b.js',
            'scripts/c.js',
        ])
        .pipe(concat('all.js'))
        .pipe(gulp.dest('./scripts'))
        .pipe(rename('all.min.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./scripts'));
});

There are various ways you can make functions that are tasks. See the docs here for more information.

Once you've got several tasks created you can compose them with series or parallel. See here for more information on composing multiple tasks together.

exports.mytask1 = ...
exports.mytask2 = ...

exports.alltasks = gulp.series(
    mytask1,
    mytask2
);