AppDividend
Latest Code Tutorials

Gulp js Tutorial For Beginners

1 840

Get real time updates directly on you device, subscribe now.

Gulp js Tutorial For Beginners. Gulp js task runner to run the automated tasks. In Large javascript web applications, Gulp is a handy tool to minify the js and css, concatenating library files and compiling sass or less files. Gulp js uses Node.js as a platform so you must have to install Node.js on your machine. You can find more on gulp.js on its official documentation.

Why use Gulp?

  1. It uses the  gulpfile.js file, which is Javascript file and we can write that tasks into Javascript.
  2. It uses SASS and LESS as CSS preprocessor.
  3. It is very fast compared to another 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 by using the Node.js platform.

Gulp js Installation

You can also install 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.

Now, 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 they are the following.

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

First, 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 First Gulp.js task.

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

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

Now, we need to copy this file inside 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.

Related Posts
1 of 5
gulp css

You can see that the style.css file is generated in 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 we have talked earlier, we can compiler SASS and LESS files into CSS file. So first, we create a scss file and then compile it to CSS file. Inside 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;
}

Next step is to compile this file into CSS file. For that, we need to install 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 src directory called less. 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 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. Run the Gulp task runner.

gulp lessCss

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

gulp watch

gulp.watch task is watching the files that frequently changes and rerun the task automatically. For example, if we need to change the file style.less regularly then 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 again recompiles it.

Minify JS files using Gulp

First, of all create one javascript file inside src  >>  js folder. Call that file app.js

// app.js

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

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

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 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, process the CSS, JS and Images file. You can set the task to automate to make things more comfortable in the large web applications. Finally, our gulp js tutorial example for beginners is over. Thanks for taking this tutorial.

Github Repository

1 Comment
  1. yakov says

    Thanks a lot.
    I’ve learn a lot of tech using this website.
    Really thank you indeed.

Leave A Reply

Your email address will not be published.