Joseph Jude

Consult . Code . Coach

Gulp - a beginner's guide


code . nodejs

Gulp-A Beginner's Guide

Front-end development has come a long way. Long back, we had to code directly in HTML, CSS, and Javascript. Now for everything there is an abstracted library, framework, or a toolchain. We can write in markdown and use any of the templating engines to convert to HTML; we can write LESS, SCSS, or other variations to create CSS; we can use Typescript (or Coffeescript) and compile down to Javascript.

These front-end tools made developer's life easy. But they also bring with them lot of manual work. Whenever there is repetitive manual work, it leads of boredom and error. Programmers hate manual work.

Three great virtues of a programmer: Laziness, Impatience and Hubris - Larry Wall

This is where a tool like Gulp helps. Gulp is a tool that automates many of the tasks associated with development - compiling, reloading server, testing, and so on. Such a build tool brings consistency to development process, thus eliminating development errors.

What can Gulp automate? Here is a partial list of activities that it can automate:

Let us now get started with gulp.

Getting started with gulp

Getting started with Gulp is a 3-step process.

1. Install gulp globally

npm install -g gulp

2. Install gulp as a dev-dependency in the local project

npm install --save-dev gulp

3. Create a gulpfile.js in the root directory of the project

var gulp = require('gulp');

gulp.task('default', function() {
  // code goes here
});

When we execute gulp, the default task is executed.

So let us consider, this gulpfile.js.

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('hello from gulp');
});

If you invoke gulp at the terminal, you will see this:

[15:02:57] Using gulpfile gulpfile.js
[15:02:57] Starting 'default'...
hello from gulp
[15:02:57] Finished 'default' after 180 μs

Before we dive deep, let us understand how gulp works.

Understanding how gulp works

Gulp is based on the concept of tasks and streams. Each task takes an input, does whatever it is supposed to do, and then passes the output to next task.

Because of tasks and streams, we can break down our workflow into smaller tasks, and pipe them together for the needed workflow. We can mix and match these tasks the way we want. This makes gulp highly flexible.

The Gulp API is small. There are only 4 functions. Let us look at these functions.

gulp.src

It selects the files to use. It uses .pipe to chain its output to other tasks. You can use globe or array of globes to select files.

gulp.dest

It points to the output folder for files. In the previous example, the minified js file will be written to a folder named build.

It can also pipe its output to subsequent tasks.

For example, we can select all .js files, minify them, and write to a build folder.

gulp.src('*.js')
.pipe(minify())
gulp.dest('build')

gulp.task

It defines the task to execute. You can also specify tasks that need to be completed prior to executing the current one.

gulp.task('taskname', ()=>{
    // do stuff
});

If you have other tasks to complete prior to compiling, you can specify them too.

var gulp = require('gulp');

gulp.task('first', () => {
    console.log('hello from first task')
});

gulp.task('second', () => {
    console.log('hello from second')
});

gulp.task('default', ['first', 'second'], () => {
    console.log('hello from gulp')
});

If you run this with gulp, you will get output like this:

[19:36:23] Starting 'first'...
hello from first task
[19:36:23] Finished 'first' after 237 μs
[19:36:23] Starting 'second'...
hello from second
[19:36:23] Finished 'second' after 218 μs
[19:36:23] Starting 'default'...
hello from gulp
[19:36:23] Finished 'default' after 143 μs

Keep in mind that gulp doesn't execute these tasks in sequence; they are executed in parallel.

gulp.watch

As the name suggests, it watches files and invokes a task when a file changes.

gulp.watch('scripts/**/*.js', ['lint']);

When any of javascript files changes, this will invoke the lint task.

Where to go from here

As the title suggests, this post is only a beginner's guide. Its purpose is to introduce Gulp. Please read my Comprehensive guide to using Gulp with hapijs & Typescript for a practical example of using Gulp to automate workflow for backend node.js development using hapi.js and Typescript.

You can also browse through gulp recipes to pick up the ones that suits your need. Also browse through gulp plugins to identify plugins that you need.

Finally, don't forget to subscribe using the below form to learn full-stack programming.


Like the post? Retweet it. Got comments? Reply.

Gulp - a beginner's guide by @jjude https://t.co/Ijzqt8mjZB pic.twitter.com/JJAYV0QWol

— Joseph Jude (@jjude) August 7, 2017
Share this on: Twitter / /

Comments

comments powered by Disqus