What is Gulp? and how to use it?

Gulp is an open source JavaScript toolkit made by Fractal Innovations. It is a task runner that is built on Node.js and NPM. Like any other task runner, Gulp provides automation. However, the automation is not what has made it popular among the development communities but the simple workflow of gulp and simple gulp APIs (only four API in gulp — gulp.task, gulp.src, gulp.dest and gulp.watch ).

Gulp Workflow

Basically, the first step to performing any build operation is by defining it. The following snippet of code shows how simple it is to define a task in Gulp.

//Defining Message Task which displays Gulp is running in console
gulp.task('message', function(){
     return console.log('Gulp is running');
});

In the task, we can load any number of files. Once the files are loaded, modification can be made to the files anytime since they are all being processed in memory but not in a file (grunt temporarily makes a copy of the file and stores in a temporary directory).

//defining scripts tasks and performing actions
gulp.task('scripts',function(){
     gulp.src('src/js/*.js')
       .pipe(uglify())                 //removes all white spaces
       .pipe(concat('main.js'))        //concatenates all file
       .pipe(gulp.dest('dist/js'));    //send to destination
});

Send the files to a specified destination.

How to use Gulp?

Using Gulp is simpler than you think. The following steps will give brief overview of using gulp.

Step 1: Install Gulp

Gulp can be installed via npm. Go to the root folder and type the following snippet of code:

npm install gulp --save-dev

This will save gulp as a development dependency in package.json file of the project. We are doing this since it is a tool to help us while developing and needs to be resolved at development time.

If you do not have a package.json file, it may fail. So be sure to do the following command in the terminal or command line if you are just starting the project.

npm init

This will create a package.json file for you.

Note: if there are any errors caused due to permission
      Run the command with administrative privilege
      or (in linux/mac) use ‘sudo’ keyword before the command.

Step 2: Creating a gulpfile.js

A gulpfile.js is the main file used to define all of our tasks. We can create a gulp file by just creating a new file and naming it to be gulpfile.js in the root directory and adding the following snippet of code at the top:

const gulp = require('gulp');

We are just adding reference to the gulp that we installed in the node modules before by adding ‘require’ function.

Step 3: Adding few tasks on gulpfile.js

To add and test the gulp tasks, create a demo structure just like below:

C:\GULPSAMPLE
│   gulpfile.js
│   package-lock.json
│   package.json
│   node_modules
│   
└───src
    │   about.html
    │   index.html
    │
    ├───images
    │       logo.jpeg
    │
    ├───js
    │       file1.js
    │       file2.js
    │
    └───sass
            style.scss

Now, we will try to do the following task using gulp:

1. Concatenate two JavaScript files and remove white spaces (uglify)
2. Compile SASS to CSS
3. Optimize the quality of image
4. Watch for any changes.

First we need to install the following plugins which will help us accomplish the above tasks.

1. gulp-imagemin (This helps to optimize the image size)
2. gulp-uglify (This removes white spaces from the files)
3. gulp-concat (This helps to concatenate files)
4. gulp-sass (This helps to compile sass file to css)

(Note: All plugins start with ‘gulp-’)

Use the following snippet of code to install the above mentioned plugins:

npm install gulp-imagemin --save-dev
npm install gulp-uglify --save-dev
npm install gulp-concat --save-dev
npm install gulp-sass --save-dev

After the installation, there will be dependencies in package.json file which will verify that the plugins are installed.

package.json

Before we start concatenating the files, let us first add a task that copies all html files to a folder name dist where our build system will exist. Add the following snippet of code in gulpfile.js

//copy All Html files
gulp.task('copyHtml', function(){
     gulp.src('src/*.html')
       .pipe(gulp.dest('dist'));
});

Note: Also, be sure to add few contents to the JavaScript files and CSS for test purposes if you are going along with these steps.

Run the following command in the terminal from your root directory of the project, you should see a dist folder with all the html files from the ‘src’ folder.

> gulp copyHtml

Now, We will start by concatenating JavaScript and uglifying it. Add the following snippet of code in gulpfile.js

//importing the gulp-uglify plugin
const uglify = require(‘gulp-uglify’);
//importing the gulp-concat plugin
const concat = require('gulp-concat');
//Defining script task to uglify the javascript files and
//concatenating them
gulp.task('scripts',function(){
     gulp.src('src/js/*.js')
       .pipe(uglify())                 //removes all white space
       .pipe(concat('main.js'))        //concatenates all files 
                                       //to main.js
       .pipe(gulp.dest('dist/js'));    //send to destination
});

Now run the command:

> gulp scripts

You can see main.js file with no white space and the contents of both files on it. Now lets add other tasks using the same approach in gulpfile.js

Add the following snippets of code:

//importing imagemin plugin
const imagemin = require('gulp-imagemin');
//importing sass plugin
const sass = require('gulp-sass');
//optimize the images
gulp.task('imageMin', ()=>{
     gulp.src('src/images/*')
       .pipe(imagemin())      //minimize the size of image
       .pipe(gulp.dest('dist/images'));
});
//compile sass
gulp.task('sass',function(){
     gulp.src('src/sass/*.scss')
       .pipe(sass().on('error', sass.logError)) //uses sass compiler
                                              //or logs error if any
       .pipe(gulp.dest('dist/css'));
});

These tasks will optimize the image size of the image that was present in the ‘src/images’ folder and also compile the SASS file in ‘sass’ folder to CSS.

It will be hard for us to run every task individually, so, let us create a default task that comprises of all the task. Add the following snippet of code to gulpfile.js

gulp.task(‘default’,[’copyHtml’,’imageMin’, ‘sass’, ‘scripts’]);

Now, if we use only gulp command, it will do all the tasks automatically for us. Try it, run only ‘gulp’ in command line or terminal.

We need to run the task every time we change the files unless we use another task that will watch for any changes in the file and automatically do the respective task. So, add the following snippet of code to gulpfile.js

//watching task which checks for any file changes
gulp.task('watch',function(){
     gulp.watch('src/js/*.js', ['scripts']);
     gulp.watch('src/images/*', ['imageMin']);
     gulp.watch('src/saas/*.scss', ['sass']);
     gulp.watch('src/*.html', ['copyHtml']);
});

Now, if we run the ‘watch’ task, it will watch for any changes and do the respective task. Change some content in html file and see if it runs or not. First type the following in terminal or command line

gulp watch

Then, modify some contents in any of the files you have created, and see the automation.

If you need all the files; you can see the following repository:

oneworld3/GulpSample