How I Use Gulp.js In My Web Development Workflow

Gulp.js is a not so new toolkit built using JavaScript that helps automate your workflow as a developer. Whether you do front end development, back end development or even mobile app development Gulp can help make your workflow scale fast.

Want to follow along? Download the final source code below:

Download Source

Tasks

The general idea of Gulp.js is to separate different functionalities into their own task. Within each task, you can interact with your code be it the compilation, minification, optimization or just simply refreshing your browser when you make a change.

A common trend I see is grouping different types of code into their own tasks. For example, I compile my Sass code into traditional CSS. Rather than mixing my JavaScript gulp tasks in the mix, it's far easier to separate the two.

For an in-depth overview of Gulp.js as a whole, I invite you to read a previous article where I cover all the basics.

Diving Deeper into my own Gulp.js tasks

In this tutorial, I recreate what is essentially my very own master Gulpfile.js. In a combination with Node.js and npm, I am able to use plugins to enhance my development workflow. Many of my tasks depend on the same plugins and their offerings.

Example: The Sass Task

// Necessary Plugins for the task to run
var gulp = require('gulp');
var sass = require('gulp-sass');
var autoprefixer = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var connect = require('gulp-connect'); 

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

    /* Define the source of our Sass files */
    return gulp.src('assets/sass/**/*.scss')

    /* Initialize the sourcemaps plugin */
    .pipe(sourcemaps.init())

    /* Pipe the Sass through autoprefixer plugin */
    .pipe(autoprefixer({
        browsers: ['last 2 version'],
        cascade: false
    }))

    /* Pipe the Sass through the sass plugin to both minify and compile to tradition CSS */
    .pipe(sass({
        outputStyle: 'compressed'
    })

    /* Log errors as they happen */
    .on('error', sass.logError ))

    /* Write the sourcemaps to "maps" */
    .pipe(sourcemaps.write('./maps'))

    /* Compile CSS down to master style.css in the project directory */
    .pipe(gulp.dest('./'))

    /* Reload browser as changes take place */
    .pipe(connect.reload());
});

While the code looks complicated you can think of the task as a chain-link whereas each new link is added something new transpires. At the end of the link, the final result is what you have configured inside the task as a whole.

This independent task is run by using the command:

gulp sass

In my own workflow I like to combine all my tasks into a single command which can be done like this:

gulp.task('default', ['sass', 'server', 'watch', 'livereload', 'js']);

So when I run gulp in my terminal each of these tasks gets initialized automatically.

I go into much more in-depth in the screencast. You can follow along and find the source code to this project using the button below:

Download Source