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
|
1 2 3 4 5 6 7 8 9 10 |
{ "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
|
1 2 3 4 5 6 7 |
-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
less-watch-compiler --run-once input output
