Conditional gulp task inside gulp.paralell() or gulp.series()

Question

Too much information about conditions tasks inside pipes (e. g. "gulp-if" plugin). However, actually it is not "conditional tasks": it is the "conditional plugin usage", and one task can use multiple plugins. Here is how to conditionally run task NOT inside pipe (for example, inside gulp.paralell())

Suppose that task name can contain spaces for providing easy-to-understand task meaning.

gulp.task('Build', gulp.paralell(
    'Preprocess HTML',
    'Prepeocess styles',
    done => {
        if(checkSomeCondition()){
            runTask('some Task') // but how?
        }
        else {
            done();
        }
    }
))

Answer 1

The beauty of gulp4.0 is that your tasks can just be functions, so the following works:

gulp.task('Preprocess HTML', function () {
  console.log("in Preprocess HTML");
  return gulp.src('./');
});

You can use either the above version (the 'old way') or the newer way below.

I show two tasks here that use both versions but I personally wouldn't mix them.

// function PreprocessHTML() {
//   console.log("in Preprocess HTML");
//   return gulp.src('./');
// }

function PreprocessStyles() {
  console.log("in Preprocess styles");
  return gulp.src('./');
}

function testTaskTrue() {
  console.log("in testTaskTrue");
  return gulp.src('./');
}

function testTaskFalse() {
  console.log("in testTaskFalse");
  return gulp.src('./');
}

function checkSomeCondition() {
  console.log("in checkSomeCondition");
  return false;
}

//    Again, I definitely wouldn't mix the two versions of tasks as shown below.
//    Just here for demonstration purposes.

gulp.task('test', gulp.parallel( 'Preprocess HTML',  PreprocessStyles,
  done => {
    if (checkSomeCondition()) {

        // so testTaskTrue can be any gulp4.0 task, easy to call since it just a function

      testTaskTrue();
    }
    else {
      testTaskFalse();
    }
    done();
  }
));

Answer 2

For gulp 4, first create this helper function:

function gulpTaskIf(condition, task) {
  task = gulp.series(task) // make sure we have a function that takes callback as first argument
  return function (cb) {
    if (condition()) {
      task(cb)
    } else {
      cb()
    }
  }
}

• As its first argument, this helper takes a condition in the form of a function. The condition function is run at the time when the task execution is to start, so you can i.e. check output of previous steps in the condition function.
• The second arguments specifies the task to be run and can be the same values that gulp.parallel() or gulp.series() accept as arguments, i.e. string, function reference, or a return value from another gulp.parallel() or gulp.series().
• Returns a function that can be passedto gulp.task() as second argument or as an argument to gulp.parallel() or gulp.series() call.

Examples (first one matches question):

• embedded in e.g. gulp.parallel() or gulp.series(), calling task by name

gulp.task('Build', gulp.parallel(
    'Preprocess HTML',
    'Prepeocess styles',
    runTaskIf(checkSomeCondition, 'some Task')
))

• as a task, calling task by name

function myTask() {
  return gulp.src(...)
    ...
    .dest(...)
}
gulp.task('my-task', myTask)
gulp.task('default', gulpTaskIf(
  function () {
    return Math.random() < 0.5; // example condition
  },
  'my-task')

• as a standalone task, calling task by function reference

function myTask() {
  return gulp.src(...)
    ...
    .dest(...)
}
gulp.task('default', gulpTaskIf(() => Math.random() < 0.5, myTask)

• as a standalone task, calling gulp.parallel() or gulp.series() reference

const manyTasks = gulp.parallel(task1, task2, task3)
gulp.task('default', gulpTaskIf(
  function () {
    return Math.random() < 0.5;
  },
  manyTasks)

Answer 3

I have an array for plugins where I do a simple If query and then expand the array, see line 280 here.

Based on Gulp 4.

For the build process I changed the Const to Let and also queried it with If.

Answer 4

It is really simple. No need of helper function:

gulp.task('Build', function() {
  const tasks = ['Preprocess HTML', 'Preprocess styles'];
  if(checkSomeCondition()) tasks.push('some Task');
  return gulp.parallel(tasks);
}());

The clue is in calling the function at the last line - it will return an adjusted gulp.parallel task - I am using this to handle command line arguments (yargs)

WARNING: this will be executed before the first task is executed and will be executed also when other task than 'Build' is run. Just have it on your mind when implementing logic ;)

Answer 5

Now how about that (solution for Gulp 4)

gulp.series(
  task1,
  ...(condition ? [task2] : [])
);