
We are getting faster at developing interfaces, using on-save-compilation for compiling Less to CSS.
No editor plugin. No dirty trick. No hard code to understand.
I will provide you with a clean Javascript snippet, and easy steps to get your setup done in seconds.
Setup
You need:
- A project directory:
mkdir project
- Gulp:
Both globally and in your project:
npm install -g gulp
or yarn global add gulp
cd project
npm install gulp
or yarn add gulp
- Gulp-Less: In your project only
cd project
npm install gulp-less
or yarn add gulp-less
Youâre done. Onward.
Short Explanations
Gulp is a Javascript task runner that lets you automate redundant tasks.
It has a lot of built-in features that are really useful.
Among those, weâll be using the file watcher which lets us execute a task when a file changes.
Gulp-Less is a Gulp plugin made specifically for compiling Less files to CSS. It provides us with a Less compiler.
Working Snippet
Which you can easily customize to fit your needs.
First, create a file at the root of your project directory and name it gulpfile.js
.
It is how Gulp expects you to organize your tasks, so donât name it differently.
Then, copy-paste this snippet into gulpfile.js
:
Finally, open a terminal (either using cmd or Ctrl + Shift + Ăč
in VSCode) and run this command :
gulp default
Youâre done.
Every time youâll modify a Less file located in your srcDir
, it will compile it and generate the corresponding CSS file located in your dstDir
.
By âmodify a fileâ I mean using Ctrl + S
or File > Save
Further Details: How Does It Work ?
First, weâre just importing two modules: gulp | gulp-less
.
Then, we define where our Less files are located and where we want the CSS files to be generated.
Line 9 :
Weâre defining a Gulp task named âlessâ, and defined by a custom function of ours.
Line 11
: We order Gulp to take all the .less files in srcDir as source. ( using *.less )
Line 12 :
We order Gulp to take all those files into the less function (using pipe) which comes from the gulp-less module. This function will just compile each file to their CSS counterpart.
Line 13 :
We order Gulp to take all the dynamically created CSS files from their Less sources and save them into srcDir .
Yet, this task by itself alone does nothing. Itâs just a task defined somewhere which alone wonât react to file changes.
Thatâs why:
Line 17:
We tell Gulp to execute the less task when a file located in srcDir changes.
Finally, running gulp default
will run the default task which itself runs the less task each time a file changes.
Going Further
At first, I didnât want to start learning yet another tech in the ocean but boy, (believe me) itâs worth the time invested.
Gulp lets you automate tons of things, like :
- File Minification / Beautification.
- Auto prefixing for browser compatibility.
- Browser refresh on save.
- Many other time consuming tasks youâd better let Gulp handle for you đ
Also, VSCode has a Tasks tab from which you can run gulp tasks. Thatâs also why gulpfile.js naming is important.
Even further, VSCode lets you define keyboard shortcuts for running tasks so that typing a command or clicking on Tasks wonât be a pain for you anymore.
See this link for running tasks using keyboard shortcuts
Note that running
gulp default
will keep running and watching files until you close the editor / command-line interpreter.
Thanks for reading
Making my best to provide you with valuable content every week of this year.
Iâd definitely appreciate some 50 claps đŒ
Check out my last article :
Track custom events on your website using Google Analytics
Feel free to reach out at david.mellul@outlook.fr.
More valuable content on my personal website : https://dmware.fr


Fullstack Developer, Trainer & Entrepreneur.
Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.