Automate your development tasks with Gulp.js

What is Gulp.js?

Gulp.js is a command-line task runner which is used to automate development tasks such as

• Compressing images
• Compiling SASS to CSS code
• Transpiling ES6 to ES5 (Cross-browser compatible) code
• Concatenating and minifying CSS and JavaScript files

By automating these repetitive tasks will increase the developer’s productivity, make deployment-ready files, and also make time to focus on other tasks.

Install Node.js and NPM

Before going into the hands-on part, we need to install several packages and dependencies required to run gulp.

Make sure that you installed the node.js and npm in your system. If not, install by using the below command

sudo apt update
sudo apt install nodejs
sudo apt install npm

Use the below command to double-check whether it is installed or not

node -v
npm -v

Setting up Gulp

First, we need to install Gulp CLI globally which is used to run gulp on the command line.

sudo npm install gulp-cli -g

Now, Create a new folder and go inside the folder.

mkdir gulp-example
cd gulp-example

Next, install gulp and gulp-sass

gulp-sass is used in the compilation of SASS into the CSS process.

npm install gulp --save-dev
npm install gulp-sass --save-dev

Everything is ready. We’re good to go.

Let’s go!

In this article, we’re going to automate the process of compiling SCSS files into CSS.

Create an SCSS file named style.scss which we’re going to compile to CSS

$color:rgb(75, 22, 221);
$width:50px;
.container {
    color: $color;
}
.nav {
    width: $width;
}

Create a gulpfile.js and an important note that the file name should be gulpfile.js, if you give a different name it will throw an error that says

No gulpfile found

Next, import gulp and gulp-sass in gulpfile

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

Methods in Gulp.js

.task is used to define a task

.src is pointing to the source folder/file

.dest is pointing to the output folder where the output files are stored

.pipe method make a chain of multiple processes like reading and write the files

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

Here ‘scss’ is the name of the task.

Run your task by using the command gulp <name of the task>

gulp scss

The output will look like this

Using gulpfile ~/Desktop/gulp-example/gulpfile.js
Starting 'scss'...
Finished 'scss' after 504 ms

Go and check the css folder and you can see the compiled style.css file

.container {
   color: #4b16dd; 
}
.nav {
   width: 50px; 
}

Hope you find reading this article useful!

Feel free to check out the git repository.

hariprasad1003/gulp-example