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

Cappuccino in a white mug with white foam art on a wooden table
“Cappuccino in a white mug with white foam art on a wooden table” by wu yi on Unsplash

Leave a Reply

Your email address will not be published.

Continue reading

Broken by design : Hash