Creating an Interactive Task Selector in Gulp

Gulp

Gulp is a powerful streaming build system designed to help automate and enhance your development workflow. If you haven’t used Gulp before, I suggest you head over to their Github account to find out more information on how it works. In regards to this post, I am going to assume that you are familiar with Gulp and have used it before.

Gulp’s Default Task

Gulp allows you to define tasks with the gulp.task function, and makes it super easy to create multiple tasks and run them in parallel/sequence. Tasks can be run in the terminal with the command: gulp <task>. Running gulp in your terminal without any argument will run your default task, and spew out an error if you have not created one.

A default task which simply logs to the console would look like this:

var gulp = require('gulp'),
    util = require('gulp-util');

    gulp.task('default', function() {
        util.log('Hello World!');
        return;
    });

Normally I set my default task to simply run another task I have defined elsewhere:

gulp.task('build', function() {
    // Do something cool.
})

gulp.task('default', ['build']);

In one of my more recent projects, I decided to do something different. By using the gulp-prompt plugin and writing a few lines of code, I created an interactive task selector which runs whenever gulp is run without any arguments (i.e. the default task is run).

Creating the ‘select-task’ Task

The first thing we want to do is import the gulp prompt package. We do this by simply installing it with npm install gulp-prompt --save-dev and then including it in gulpfile.js.

var gulp = require('gulp'),
    prompt = require('gulp-prompt');

gulp-prompt allows us to add interactive console prompts to our gulp tasks. We are going to create a task which presents the user with a list of tasks they can select from. Once they select a task, we’ll run it. Bam! Our default task just became that much cooler.

The code is fairly easy to follow:

var gulp = require('gulp'),
    util = require('gulp-util'),
    prompt = require('gulp-prompt');

// Select a task
// Allows the user to select a task from a user-defined list of tasks, and run it.
gulp.task('select-task', function() {
    let tasks = ['a', 'b', 'c'];

    return gulp.src('./gulpfile.js')
        .pipe(prompt.prompt({
            type: 'checkbox',
            name: 'task',
            message: 'Choose your destiny.',
            choices: tasks
        }, function(result) {

            // Enforce only one selection.
            if (result.task.length > 1) {
                util.colors.red('Please select one task at a time!'));
                return;
            }

            // Runs the task selected by the user.
            var selectedTask = result.task[0];
            util.log('Running task: ' + util.colors.green(selectedTask));
            gulp.start(selectedTask);
        }));
});

gulp.task('a', function() {
    // Do something cool.
});

gulp.task('b', function() {
    // Do something else cool.
});

gulp.task('c', function() {
    // Do something even cooler.
});

gulp.task('default', ['select-task']);

And that’s all there is to it!

First we create a list of tasks which the user can select from. We limit our list to only include those tasks which we allow the user to run directly. The selected task is captured in result as an array in our callback function. Technically the user can select more then one task at a time (I could not find a way to restrict this in the gulp-prompt library), so we display an error and return if the user tries to be sneaky and select more then one.

After that we simply run the selected task with gulp.start and the rest is rainbows and butterflies.

If you haven’t used Gulp, I highly recommend checking it out. There are many different plugins available that will make your development workflow less painful and more efficient.