Getting started with gulp.js

Gulp.js is a great tool for building and enhancing workflows. It is free and open source. It helps you automate repetitive tasks such as automating CSS creation and unit testing. In this article, I will walk you through many simple examples of using Gulp.js but first let’s look at the gulp API which only consists of 4 functions!

gulp API

gulp.dest is where you define you output file. This is where you will store output from a specific gulp task.

gulp.dest('/output/filepath');

gulp.src is where you define you input file(s). The content of these file(s) will be passed to a specific gulp task as input.

gulp.dest('/input/filepath');

gulp.task is where you define your tasks.

gulp.task(my'task', function() {
  // some code
});

gulp.watch simply returns a eventemitter that triggers when something you are watching it modified.

gulp.watch('myfile.less', ['lesstocss']);

This gulp command is watching the file myfile.less. When you save a change in myfile.less, it will call the function lesstocss which will then rebuild CSS files from myfile.less.

See gulp API documentation for more information.

Compiling Less and Sass

CSS is easy when the CSS file is small. A large CSS file is painful to read and modify. LESS and SASS are CSS preprocessors. These languages allow you to write functions which then get compiled in CSS code. The following gulp example shows how to automate LESS to CSS conversion. First we install gulp-less plugin.

$ npm install --save-dev gulp-less

gulp code:

// include plugins
var gulp = require('gulp');
var gless = require("gulp-less");

// compile less to css
gulp.task('lesstocss', function () {
  gulp.src('less/test.less').pipe(gless()).pipe(gulp.dest('css'));
});

Change the value of gulp.src() to the location of your LESS file. Change the location of gulp.dest() to the location of your CSS directory. To run

$ gulp lesstocss

Note that the code is very simple. First you download the relevant plugin. Then require it. We create a new function, lesstocss. The function simply takes the LESS file, pipes it to gulp-less and then pipes the output to the CSS directory. In a similar way, we can keep adding functions to automate more tasks. Following example shows how to compile SASS.

First we install gulp-sass plugin.

$ npm install --save-dev gulp-sass

gulp code:

// include plugins
var gulp = require('gulp');
var gsass = require("gulp-sass");

// compile sass to css
gulp.task('sasstocss', function () {
  gulp.src('./sass/filepath').pipe(gsass()).pipe(gulp.dest('cssdirectory'));
});

Change the value of gulp.src() to the location of your LESS file. Change the location of gulp.dest() to the location of your CSS directory. To run

$ gulp sasstocss

The following section shows how to automate three tasks in one function.

Minifying code

Minification refers to removing all unnecessary code such as whitespace, tab, \n, etc. I don’t like minified code but it you choose to minify, following gulp code will help you. First, install the necessary plugins gulp-minify-css, gulp-minify-html, and gulp-uglify

$ npm install --save-dev gulp-minify-css gulp-minify-html gulp-minify-js

gulp code:

// include plugins
var gulp = require('gulp');
var gmcss = require("gulp-minify-css");
var gmhtml = require("gulp-minify-html");
var gmjs = require("gulp-uglify");

// minify code
gulp.task('minify-code', function () {
  gulp.src('./css/filepath').pipe(gmcss()).pipe(gulp.dest('CSS/Destination'));
  gulp.src('./htmldirectory/*.html').pipe(gmhtml()).pipe(gulp.dest('HTML/Destination'));
  gulp.src('./scripts/*.js').pipe(gmjs()).pipe(gulp.dest('JS/Destination'));
});

You need to change the values of gulp.src and gulp.dest to valid paths within your environment.. To run the code, simply type the following in command line:

$ gulp minify-code

Compile CoffeeScript

CoffeeScript is a small language which compiles into JavaScript. It is cleaner to and more readable than JavaScript. First, install the necessary plugin gulp-coffee

$ npm install --save-dev gulp-coffee

gulp code:

// include plugins
var gulp = require('gulp'), gcoffee = require('gulp-coffee');

// compile coffee
gulp.task('compile-coffee', function () {
  gulp.src('coffee/file').pipe(gcoffee()).pipe(gulp.dest('coffee/output/file'));
});

You need to change the values of gulp.src and gulp.dest to valid paths within your environment.. To run the code, simply type the following in command line:

$ gulp compile-coffee

TypeScript is gaining more popularity than CoffeeScript. Automating TypeScript compilation require a few extra steps. I will cover it in a separate article.