Gulp 4 Default Task with Series and Parallel

Question

I've looked at many different posts here on SO using Gulp

CLI version: 2.3.0
Local version: 4.0.2

and have tried multiple approaches to the gulp 4 default task declaration:

exports.default = gulp.series(clean, (done) => {
  gulp.parallel(styles, scripts);
  done();
});

gulp.task('default',
  gulp.series(clean, (done) => {
    gulp.parallel(scripts, styles);
    done();
  });
);

function production () {
    return gulp.series(clean, function (done) {
    gulp.parallel(styles, scripts);
    done();
  })
}

exports.default = production

Clean function is simple:

function clean(cb) {
  console.log("clean");
  del(["dist"]);
  cb();
}

For testing I have created a test function:

function test() {
    console.log("in test");
    return (
        gulp.src(paths.styles.src)
            .pipe(notify("Styles rendered"))
    );
}
exports.test = test;

And a test default function:

exports.default = gulp.series(clean, (done) => {
    console.log("before styles and scripts");
    gulp.parallel(test);
    console.log("after styles and scripts");
    done();
});

Printed to the terminal are:

"clean"
"before styles and scripts"
"after styles and scripts"

But no "in test".

What am I missing here?

score 0 · Answer 1 · answered Dec 09 '20 at 13:26

Not sure if this is the way Gulp is designed, but based on this answer, the code that works for me is:

exports.default = gulp.series(clean, (callbackA) => {
    return gulp.parallel(styles, scripts, (callbackB) =>
    {
        callbackA();
        callbackB();
    })();
});

And the three tasks i'm calling are:

function clean(cb) {
  del(["dist"]);
  cb();
}


// Define tasks after requiring dependencies
function styles() {
    console.log("in styles");
    return (
        gulp.src(paths.styles.src)
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(sourcemaps.init())
            .pipe(sass())
            .on("error", sass.logError)
            .pipe(postcss([autoprefixer(), cssnano()]))
            .pipe(sourcemaps.write())
            .pipe(gulp.dest(paths.styles.dest))
            // Add browsersync stream pipe after compilation
            .pipe(browserSync.stream())
    );
}

// Expose the task by exporting it
// This allows you to run it from the commandline using
// $ gulp style
exports.styles = styles;


function scripts() {
    // Start by calling browserify with our entry pointing to our main javascript file
    return ( gulp.src(paths.scripts.src)
            .pipe(babel())
            .pipe(uglify())
            // Then write the resulting files to a folder
            .pipe(gulp.dest(paths.scripts.dest))
    );
}

// Expose the task, this allows us to call this task
// by running `$ gulp build' in the terminal
exports.scripts = scripts;

Aside from Gulp docs and here, this was a nice source.

Gulp 4 Default Task with Series and Parallel

1 Answers1