Gulpjs – A quick Walkthrough

Today i came across with some amazing and powerful features of Gulp.js(Open source). Its a task runner and a powerful feature of nodejs. Gulp uses node.js streams. Its easy to use and have some useful api.

What is Gulp?

Its is a fast and intuitive streaming build tool built on Node.js. Gulp is a Task / Build runner. It uses node.js streams. Its easy to use and have some useful api, and is efficient. Gulp.js makes use of pipes for streaming data that needs to be processed.

How is it useful

Automating common/tedious task while building product(specially fronted) so that you can focus on more important task. There are loads of plugins available here which does various task and help us achieve almost everything. Few common task that i preferably use:

and many more…

Lets go to playground to have some fun.

Prerequisites:

Since it part of node module so we need to install nodejs first. I run on Ubuntu 14.04 OS.

Open the terminal and first install the node.

sudo apt-get update
sudo apt-get install nodejs

Now you need to install the npm which is Node.js package manager, from which one can install modules and packages to use with Node.js.

sudo apt-get install npm

So node is installed by now, you can check it by issuing nodejs -v and npm -v

Installing Gulp:

sudo npm install -g gulp

Then go to your project directory or create a new one, For me my project root directory is `/home/bishwanath/sites/gulp-demo` and run the following command, which will install it locally to the project also make sure you have already created a package.json files at root level. so that all downloaded plugins will be automatically added under  devDependencies because we use --save-dev flag

npm install --save-dev gulp

Start playing with gulp:

Lets create a file gulpfile.js in your project root directory. where we will create tasks and will run then using gulp command

Here is my initial gulpfile.js look like, just for testing purpose, added a default task which log to console 🙂

var gulp = require('gulp');
gulp.task('default', function() {
   console.log("I have configured a gulpfile"); // This will print on console as output
});

Now run this file using below command, make sure you are into your project dir.

# Lets go to the project directory
bishwanath@bishwanath-jha:~$ cd /home/bishwanath/sites/gulp-demo/

# Files in my project root
bishwanath@bishwanath-jha:~/sites/gulp-demo$ ls -all
total 32
drwxrwxr-x 3 bishwanath bishwanath  4096 Feb 19 01:24 .
drwxrwxrwx 9 bishwanath bishwanath  4096 Feb 18 23:44 ..
-rw-rw-r-- 1 bishwanath bishwanath   126 Feb 18 23:48 gulpfile.js
drwxrwxr-x 4 bishwanath bishwanath  4096 Feb 19 01:17 node_modules
-rw-rw-r-- 1 bishwanath bishwanath   131 Feb 19 01:17 package.json

# Lets execute/run gulpfile
bishwanath@bishwanath-jha:~/sites/gulp-demo$ gulp

# Here is the output
[01:31:23] Using gulpfile ~/sites/gulp-demo/gulpfile.js
[01:31:23] Starting 'default'...
I have configured a gulpfile
[01:31:23] Finished 'default' after 90 μs

In case you get below error, please run the fix as i got this on Ubuntu 14.04 and found the fix here


$ gulp

/usr/bin/env: node: No such file or directory

// Fix:run below command

ln -s /usr/bin/nodejs /usr/bin/node

How Gulp Works:

Gulp allows you to input your source file(s), pipe them through a bunch of plugins and get an output at the end, Let’s take a look at an example of what a basic JS uglifying and concating all js files into single js file called app.js with the help of gulp task.

Lets first install gulp plugin called gulp-uglify and gulp-concat


sudo npm install --save-dev gulp-uglify
sudo npm install --save-dev gulp-concat

Then modify the gulpfile as look like as below now


// Load gulp
var gulp = require('gulp');

// Load gulp plugins
var uglify  = require('gulp-uglify');
var concat  = require('gulp-concat');

// Defining a task as JS uglify
gulp.task('uglification', function() {
return gulp.src('./src/js/*.js') // It loads all .js files under /src/js
.pipe(concat('app.js')) // it further concat all files(currently we have three files check git repo below) contents into app.js
.pipe(uglify()) // it further Minify my JavaScript files/removing-spaces or compressing
.pipe(gulp.dest('./build')) // finally place that app.js file into /build directory
});

// Setting default task to run
gulp.task('default', ['uglification']);

Code Description:

The src() method let’s me specify where to find the JavaScript files.

The pipe() method takes the source stream derived from the src() method and passes it to the specific plugin concat(), so concat would receive the source stream and append all files into app.js

The pipe() method takes the source stream derived from the concat() method and passes it to the specific plugin uglify(), so it would receive the file app.js as stream and minify/compress app.js code.

Finally, using Gulp’s dest() method, all.js is written/created to my target folder. The process if very clear and very readable.

Output:

Now run gulpfile again, it will result into a single app.js(combining all js file mentioned in path into one) file under ./build directory. which will contain concatenated and compressed file of all js files under /src/js/.

bishwanath@bishwanath-jha:~/sites/gulp-demo$ gulp
[02:08:01] Using gulpfile ~/sites/gulp-demo/gulpfile.js
[02:08:01] Starting 'uglification'...
[02:08:01] Finished 'uglification' after 92 ms
[02:08:01] Starting 'default'...
[02:08:01] Finished 'default' after 7.48 μs

This is just one use case, we have may other examples use case. will be covering them into other posts, git repository.

Find the source code here on github : https://github.com/bishwanathjha/gulp-demo