Getting Started with Gulp.js - Creating Multiple Tasks

Learn how to create multiple Gulp.s tasks

In the article: “Getting Started with Gulp.js – Introduction,” I discussed the absolute basics needed to set up a Gulp.s task. In that article’s gulpfile.js, we had only one task named “default”. One of the great features of Gulp, is that it will look for a task named “default”, and execute it automatically. This is fine if you have only one task, but as soon as you have two or more, it makes sense to give each one its own name.

When you have one or more named Gulp tasks, you’ll want to execute those tasks from the default task.

Figure # 1 – The folder structure before running Gulp

File structure - before

In Example # 1, you’ll see the folder structure before running gulp. So, if you look in the BUILD folder, you’ll see two sub-folders: JS and CSS. The file main.scss will be compiled into CSS and the output will go into the BUILD/CSS folder. The file: SRC/JS/main.js will be uglified and the output will go in the BUILD/JS folder. The file SRC/COFFEE/global.coffee will be compiled and the output will also go in the BUILD/JS folder.

Example # 1 – gruntfile.js

//get references to the four modules that we need
var gulp = require('gulp'),
    uglify = require('gulp-uglify'),
    sass = require('gulp-sass'),
    coffee = require('gulp-coffee');

//create a default gulp task
gulp.task('default', function() {
    //run the sass task, the uglify task, and then run the coffee task
    gulp.start('sass', 'uglify', 'coffee');
});

//create an uglify gulp task
gulp.task('uglify', function() {
  return gulp
    .src(['src/js/**/*.js'])
    .pipe(uglify())
    .pipe(gulp.dest('build/js/')); 
});

//create a SASS gulp task
gulp.task('sass', function() {
    return gulp.src('src/sass/**/*.scss')
        .pipe(sass())
        .pipe(gulp.dest('build/css/'));
});

//create a coffeescript build gulp task
gulp.task('coffee', function() {
  gulp.src('./src/coffee/**/*.coffee')
    .pipe(coffee({bare: true}))
    .pipe(gulp.dest('build/js/'))
});

//get references to the four modules that we need

var gulp = require('gulp'),

uglify = require('gulp-uglify'),

sass = require('gulp-sass'),

coffee = require('gulp-coffee');

//create a default gulp task

gulp.task('default', function() {

//run the sass task, the uglify task, and then run the coffee task

gulp.start('sass', 'uglify', 'coffee');

});

//create an uglify gulp task

gulp.task('uglify', function() {

return gulp

.src(['src/js/**/*.js'])

.pipe(uglify())

.pipe(gulp.dest('build/js/'));

});

//create a SASS gulp task

gulp.task('sass', function() {

return gulp.src('src/sass/**/*.scss')

.pipe(sass())

.pipe(gulp.dest('build/css/'));

});

//create a coffeescript build gulp task

gulp.task('coffee', function() {

gulp.src('./src/coffee/**/*.coffee')

.pipe(coffee({bare: true}))

.pipe(gulp.dest('build/js/'))

});

In Example # 1, we have the contents of gruntfile.js. You’ll notice that there are four tasks: default, uglify, sass and coffeescript. The default task is executed automatically. So that task simply executes the other three tasks.

How to Demo the Code Example

Clone this repository: https://github.com/kevinchisholm/gulp-basics-tutorial-multiple-tasks
Install node_modules with this command: npm install
Run gulp: gulp
Look in the following folder: BUILD/CSS, you will see the file: main.css
Look in the following folder: BUILD/JS, you will see the files: main.js and global.js

Figure # 2 – The folder structure after running Gulp

File structure - after

Summary

One of the key features of Gulp is the ability to have a default task. This task is always executed by default. In this article, I demonstrated how to execute one or more named Gulp tasks from within the default task. While I chose to uglify JavaScript, compile SASS and compile coffeescript, you can create Gulp tasks for any need you might have. I hope that this article has made it easy for you to understand how to run multiple Gulp tasks.