Compiling less file with Gulp

We are hoping that we all know about CSS then let’s start with CSS pre-processors.
What do PreProcessor mean?
In computers, we can say pre-processor means a program that takes an input and produces an output that in return can be used as input for another program.

so the Question is How do pre-processors relate to css what is the use of preprocessors in css and how do it works in css ..?
There were always a need of a tool

• that makes the messy code clean and structured.
• that instead of writing same code again and again and can define some variables and reuse them.
• that can extend another css class (Mixins) into base class or we can use less functions.

if you are realy eager to learn Less You can visit their official site lesscss.org
What actually happen is we have to compile less file into css .The easiest way to install Less on the server is by using npm . but npm package manager has a dependency with node.js
We will see step by step

You need to install Node.js package ecosystem from https://nodejs.org/en/

After you have downloaded node.js  you have open node js terminal and type

npm install npm -g

on Windows for Linux users you can run same command from default terminal
You can check if node and npm are installed or not by using

node -v and npm -v

 npm install -g less

less provide a compiler called lessc by using it we can compile less file into css as browser only reads or understand css

lessc style.less style.css

there are some other command as well like less watch you need to install less watcher as well before using it and clean css for creating minified css file

Now the process is almost over but still we are not satisfied with it and we will use some other tool that will handle less

we will now start using Gulp with less.

Gulp is generally known as build tool where we define single or multiple tasks at a time which help us to perform multiple activities at a time

There are thousands of npm packages available on npm one of the important package we will try to use today is GULP

step by step :-

We need to install node.js and then we will install npm after then follow these steps :-

create a directory draft and inside it create another directory called dev in your localhost when you are inside directory dev

install gulp

npm install gulp -g

this command will generate node_module folder globally

now run

npm init

After executing this command terminal will ask some details about your project

Now execute command

npm install gulp --save-dev

This whole process will generate package.json file in parallel to your node_modules folder

After installing gulp you can also download packages which are required like gulp-less, browser-sync

try using these commands on your terminal

npm install gulp-less --save-dev

npm install browser-sync --save-dev

Now all you need to do is setup you package.json file and create a gulpfile.js  file in same directory

if you want change/update  your package.json file you can change the values

Create required directories for your project

We have divided project into two  directories one is your src and other is distro

SRC :- Is the directory where your less file will be placed

DISTRO :-  will be directory where your compiled css file will be generated (distro/css)

Complete directory Structure is below :-

distro directory will consist of css and images directory and index.html file as shown below

Images directory will consist of required images for your project and css directory consist of your style.css file whereas src directory consist of only styles.less

Now finally let’s define some task in gulpfile.js

var gulp = require('gulp');
var less = require('gulp-less'); 
var browserSync = require('browser-sync').create();
var reload      = browserSync.reload;


/* Task to compile less */
gulp.task('compile-less', function() {  
  gulp.src('./src/style.less')
    .pipe(less())
    .pipe(gulp.dest('./distro/css/'));
}); 
/* Task to watch less changes */
gulp.task('watch-less', function() {  
  gulp.watch('./src/**/*.less' , ['compile-less']);
});

gulp.task('serve', function () {

    // Serve files from the root of this project
    browserSync.init({
        server: {
            baseDir: "./distro/"
        }
    }); 
    gulp.watch("./src/*.less").on("change", reload);
    gulp.watch("./distro/*.html").on("change", reload);
});

/* Task when running `gulp` from terminal */
gulp.task('default', ['watch-less', 'serve']);

we are actually defining task like watch-less and serve and required package are included at the top of the file

gulp has 4 major functions :-

• gulp.task
• gulp.src
• gulp.dest
• gulp.watch

gulp.task :- basically defines the task and it takes 3 arguments Name of the task, Array of task, and callback function
gulp.src :- it links to a files that user wants to use
gulp.dest :- it links to a file where we want to generate the output
gulp.watch :- is used for watching the changes on the files or directory. It uses eventemitter name change which help the files to update for changes
As you can see the line gulp.task() we have an array of task (serve and watch-less) we can also pass a single task inside this method

when less file is compiled and we have applied a watch for less file so that whenever there are some changes in less file then it will automatically compile less and update changes in css file

Notice :- We Have Used Browser Sync Package . The Use Of Browser Sync Package Of Npm Is That  We Know Css File Is Included In Our Project By Using Link Tag . We Have Setup A Task That Whenever There Will Be A Change In Html And Css File Browser Will Automatically Reloaded And Changes Will Be Reflected Automatically On Browser We Don’t Need To Reload Browser Each Time.

Now we have also setup gulfile.js

Run your gulp task

gulp

Once you have pressed

Ctrl+s

You will browser will automatically reloaded for the changes

Thanks for reading hope it will help you 🙂