Gulp.js: A Complete Guide

Gulp.js uses Node.js as a platform, so you must install Node.js on your machine. You can find more on gulp.js on its official documentation.

What is Gulp.js?

Gulp.js task runner to run the automated tasks. In Large JavaScript web applications, Gulp is a handy tool to minify the JavaScript and CSS, concatenating library files and compiling sass or less files.

Why use Gulp?

  1. It uses the  gulpfile.js file, a JavaScript file, and we can write that tasks into Javascript.
  2. It uses SASS and LESS as CSS preprocessors.
  3. It is swift compared to other task runners.

Features

  1. It provides minification and concatenation.
  2. It uses pure JavaScript code.
  3. It converts LESS or SASS to CSS compilation.
  4. It manages file manipulation in the memory and enhances speed using the Node.js platform.

Gulp js Installation

You can also install it as a local project development dependency.

npm install --save-dev gulp

Now, create your project folder, and in that, create one file called gulpfile.js.

We will define all the tasks in this file. Remember, this file has to reside on the project root.

Gulp Syntax

Following the simple syntax of the Gulp file.

// gulpfile.js

var gulp = require('gulp');

gulp.task('default', function() {
  console.log('Gulp js is running');
});

Go to your terminal and fire the following command.

gulp default or gulp

You can see that logged output. So Gulp is running correctly in our project.

We will start our project and look at how we can use Gulp.js for various tasks.

gulp js tutorial

The gulp api is incredibly light, containing four top-level functions, and are the following.

  1. gulp.task
  2. gulp.src
  3. gulp.dest
  4. gulp.watch

We need to define the folder structure for our web application. Make two directories in the root folder.

  1. src
  2. public

In the src folder, create three more folders.

  1. css
  2. js
  3. images

Also, in the public folder, make three folders.

  1. css
  2. js
  3. images

Inside the public folder, make one HTML file called index.html.

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <link href="./css/style.css" rel="stylesheet"/>
   <title>Gulp js Tutorial</title>
</head>
<body>
   <div class="gulp-1">hello</div>
</body>
</html>

Create the First Gulp.js task.

Let’s say we need to build a css first. So what we can do is that inside the src  >>  css folder, make one CSS file called style.css. Then, put the following code in it.

.gulp-1 {
   height: 120px;
   width: 700px;
   background-color: aliceblue;
   margin: 0 auto;
}

We need to copy this file inside the public  >> css folder. So we need to write the task for that.

// gulpfile.js

var gulp = require('gulp');

gulp.task('css', function() {
   return gulp.src('src/css/style.css')
              .pipe(gulp.dest('public/css'));
});

Now, start the task runner.

gulp css

You can see that the style.css file is generated in the public>>  css folder.

Minify the CSS using Gulp.js.

To minify the CSS file, we need to add the gulp-clean-css file.

npm install gulp-clean-css --save-dev

We need to require this module into the gulpfile.js.

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');

gulp.task('css', function() {
   return gulp.src('src/css/style.css')
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

Now again, rerun the task.

gulp css

You can see that our style.css file is minified.

.gulp-1{height:120px;width:700px;background-color:#f0f8ff;margin:0 auto;text-align:center}

SASS compilation using Gulp.

As discussed earlier, we can compile SASS and LESS files into CSS files. So first, we create an scss file and then compile it into a CSS file.

Inside the src folder, create one folder called sass. In that folder, create one file called style.scss.

$font-stack   : Helvetica, sans-serif;
$primary-color: red;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

The next step is to compile this file into a CSS file. For that, we need to install the Gulp.js plugin.

npm install gulp-sass --save-dev

Now, include the gulp-sass module inside a gulpfile.js file.

// gulpfile.js

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');

gulp.task('css', function() {
   return gulp.src('src/sass/style.scss')
               .pipe(sass())
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

Again rerun the task.

gulp css

The output file style.css.

body{font:100% Helvetica,sans-serif;color:red}

LESS Compilation using Gulp.js

Create one more folder inside the src directory called less. Then, inside that folder, make one file called style.less.

// Variables
@link-color:        #428bca; // sea blue
@link-color-hover:  darken(@link-color, 10%);

.gulp-1 {
   background-color: @link-color
}

Now, install a gulp-less plugin to compile less file into the css file.

npm install gulp-less --save-dev

Okay, after download, include it inside gulpfile.js.

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
var less = require('gulp-less');

gulp.task('css', function() {
   return gulp.src('src/sass/style.scss')
               .pipe(sass())
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

gulp.task('lessCss', function() {
   return gulp.src('src/less/style.less')
               .pipe(less())
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

We have created another task for the LESS compiling. But first, run the Gulp task runner.

gulp lessCss

Now, you can open the index.html file in your browser and see that all the sass and less css are working correctly after compilation.

gulp watch

The gulp.watch task is watching the files that frequently change and rerun the task automatically. So, for example, if we need to change the file style.less regularly, we can watch out for the file, and if the file changes, the task rerun and recompile the whole file so we get the latest output.

// gulpfile.js

var gulp = require('gulp');
var cleanCSS = require('gulp-clean-css');
var sass = require('gulp-sass');
var less = require('gulp-less');

gulp.task('css', function() {
   return gulp.src('src/sass/style.scss')
               .pipe(sass())
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

gulp.task('lessCss', function() {
   return gulp.src('src/less/style.less')
               .pipe(less())
               .pipe(cleanCSS({compatibility: 'ie8'}))
               .pipe(gulp.dest('public/css'));
});

gulp.task('watch:less', function() {
   gulp.watch('src/less/*.less', ['lessCss']);
});

Now run the first time watch:less task.

gulp watch:less

You can see the task is running and if we change the style.less file, then it recompiles it.

Minify JS files using Gulp

First, create one JavaScript file inside the src  >>  js folder. Call that file app.js

// app.js

function add(a, b)
{
   return a + b;
}
console.log(add(5,6));

To minify this file, we need to install the gulp-uglify plugin.

npm install gulp-uglify --save-dev

After installing the file, add the following code inside gulpfile.js.

// gulpfile.js

var uglify = require('gulp-uglify');

gulp.task('jsMinify', function() {
   return gulp.src('src/js/app.js')
               .pipe(uglify())
               .pipe(gulp.dest('public/js'));
});

Run this jsMinify task.

gulp jsMinify

You can see that inside the public  >>  js  >>  app.js file.

// app.js

function add(d,n){return d+n}console.log(add(5,6));

Conclusion

You can use Gulp.js as a task runner to minify, compile, and process the CSS, JS, and Images file. In addition, you can set the task to automate to make things more comfortable in large web applications.

That’s it.

GitHub Repository

1 thought on “Gulp.js: A Complete Guide”

Leave a Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.