Node.js Project to Convert or Compile LESS to CSS Using less-watch-compiler Library in Javascript Full Tutorial For Beginners

Node.js Project to Convert or Compile LESS to CSS Using less-watch-compiler Library in Javascript Full Tutorial For Beginners

 

Welcome folks today in this blog post we will be converting or compiling less to css using less-watch-compiler command line library in Javascript

 

 

 

 

Installation

 

 

 

In order to use this library you need to first of all globally install this library by the npm command shown below

 

npm i -g less-watch-compiler

 

After installing this library you can use the commands anywhere in your system

 

 

Usage

 

 

 

Now in order to use this library commands you can make a configuration file where you can mention which directories you need to be constantly watching for changes so that you can convert all your less files to css files. Just make a configuration json file and copy paste the following code to it

 

 

{
    "watchFolder": "<input_folder>",   
    "outputFolder": "<output_folder>",
    "mainFile": "<main-file>",   
    "sourceMap": false,
    "plugins": "plugin1,plugin2",
    "less-args": "option1=1,option2=2",
    "runOnce": false,
    "enableJs": true
}

 

 

So you can see this contains a single object where you define various properties such as which folder to watch and which output folder to write the output files etc.

 

This library supports the various options as shown below

See also  Build a Deno App with OKTA Authentication Using Opine Library Full Project For Beginners

 

-h, --help                                                               output usage information
-V, --version                                                            output the version number
--main-file <file>                                                       Specify <file> as the file to always re-compile e.g. '--main-file style.less'.
--config <file>                                                          Custom configuration file path. (default: "less-watch-compiler.config.json")
--run-once                                                               Run the compiler once without waiting for additional changes.
--enable-js                                                              Less.js Option: To enable inline JavaScript in less files.
--source-map                                                             Less.js Option: To generate source map for css files.

 

 

 

Command to Convert Single LESS File to CSS File

 

 

Now we will look at a command where we will convert single or multiple less files which are present inside the directory and then we will be compiling them to css

 

less-watch-compiler inputdirectory destinationdirectory

 

Here input directory will be the directory in which all input files will be present

And destinationdirectory will be the directory where all output files will be written

 

less-watch-compiler input output

 

This will convert all less files which are present in input directory and then it will create a output directory called output and store all the output css files to it

 

 

Now if you only want to run it once you can add a option to it like this

See also  What is AJAX? How it Works Short Explanation | Tutorial for Beginners

 

less-watch-compiler --run-once input output

 

 

 

Leave a Reply