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.
- A project directory:
Both globally and in your project:
npm install -g gulp or
yarn global add gulp
npm install gulp or
yarn add gulp
- Gulp-Less: In your project only
npm install gulp-less or
yarn add gulp-less
You’re done. Onward.
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.
Which you can easily customize to fit your needs.
First, create a file at the root of your project directory and name it
It is how Gulp expects you to organize your tasks, so don’t name it differently.
Then, copy-paste this snippet into
Finally, open a terminal (either using cmd or
Ctrl + Shift + ù in VSCode) and run this command :
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
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.
Line 17: We tell Gulp to execute the less task when a file located in srcDir changes.
gulp default will run the default task which itself runs the less task each time a file changes.
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.
Note that running
gulp defaultwill 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 :
Feel free to reach out at firstname.lastname@example.org.
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.