Visual Studio Code : Auto-Compile Less To CSS On Save Using Gulp
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 :
Feel free to reach out at david.mellul@outlook.fr.
More valuable content on my personal website : https://dmware.fr