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
Install Node
You need to install Node.js package ecosystem from https://nodejs.org/en/
Install Npm
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
Install Less Using Npm
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 🙂
The following tasks did not complete: compile-less
Did you forget to signal async completion?
Did I miss something?