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 :

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

David

Fullstack Developer, Trainer & Entrepreneur.

Learning stuff, sharing knowledge and building on top of great ideas are my top priorities.