Gulp 4 - splitting up main gulpfile.js

Question

I am trying to use Gulp4 API and writing a very basic and simple tasks to start with and am having some issues with splitting up the gulp file.

Basically I have two standalone tasks, one for minifying CSS and another for minifying JS which I am trying to import into the main gulpfile.js and calling them as part of the default task.

Below is a sample of one of the standalone gulp tasks which mainly cleans up minified css and minifies and concats the css again:

"use strict";

const { src, dest, series, task } = require( 'gulp' );

const concat    = require( 'gulp-concat' );
const prefix    = require( 'gulp-autoprefixer' );
const cleanCSS  = require( 'gulp-clean-css' );
const rimraf    = require( 'gulp-rimraf' );

const baseURL = './src/main/resources/';
const minifiedCssSources = [ baseURL + '**/*min.css' ];
const cssSources = [ baseURL + '**/*.css' ];

module.exports = function() {

  const _cleanupMinifiedCss = function() {
    return src(minifiedCssSources
        , { allowEmpty: true }
        , { read: false })
        .pipe(rimraf({ force: true }));
  }

  const _minifyConcatCss = function() {
    return src(cssSources)
        .pipe(concat('css.min.css'))
        .pipe(cleanCSS())
        .pipe(prefix('last 2 versions'))
        .pipe(dest(baseURL + 'css/'));
  }

  task("cssMinify", series(_cleanupMinifiedCss, _minifyConcatCss))
}

And below is a sample of my main gulpfile.js:

"use strict";

const { task, parallel } = require( 'gulp' );

const jsMinify = require("./gulp/tasks/minifyJs");
const cssMinify = require("./gulp/tasks/minifyStyles");

function defaultTask(done) {
    parallel(cssMinify, jsMinify)
    done();
}

task('default', defaultTask);

The issue I am having is that the default task is starting and finishing fine, however no css is being cleaned up or minified/concatenated. It's like the standalone tasks are being ignored completely.

I have been trying various ways of exporting and importing the standalone tasks however haven't managed to get this working. Unfortunately the documentation on their website is pretty minimal: "Each task can be split into its own file, then imported into your gulpfile for composition. Not only does this keep things organized, but it allows you to test each task independently or vary composition based on conditions."

Anyone has any ideas what I could try or maybe I'm doing wrong with Gulp4 API?

Answer 1

For the benefit of everyone, I seem to have found a way to do this after a number of tries! :)

Pasting an example below. The key is in how you export the task in your standalone task (last 2 lines).

Standalone task - say gulp\css.js

"use strict";

const { src, dest, series, task } = require( 'gulp' );

const concat    = require( 'gulp-concat' );
const prefix    = require( 'gulp-autoprefixer' );
const cleanCSS  = require( 'gulp-clean-css' );
const rimraf    = require( 'gulp-rimraf' );

const baseURL = './src/main/resources/';
const minifiedCssSources = [ baseURL + '**/*min.css' ];
const cssSources = [ baseURL + '**/*.css' ];



function _cleanupMinifiedCss() {
    return src(minifiedCssSources
        , { allowEmpty: true }
        , { read: false })
        .pipe(rimraf({ force: true }));
}

function _minifyConcatCss() {
    return src(cssSources)
       .pipe(concat('css.min.css'))
       .pipe(cleanCSS())
       .pipe(prefix('last 2 versions'))
       .pipe(dest(baseURL + 'css/'));
}


const cssTasks = series(_cleanupMinifiedCss, _minifyConcatCss);
exports.cssTasks = cssTasks;

Main gulp file:

"use strict";

const { task, parallel } = require( 'gulp' );

const jsMinify = require("./gulp/tasks/minifyJs");
const cssMinify = require("./gulp/tasks/minifyStyles");

task('default', parallel(jsMinify.jsTasks, cssMinify.cssTasks));