How to automatically compile LESS to CSS on the server?

Question

My designer-designer created his own LESS file and uploaded it using Coda (Remote Site), spending a lot of precious time. He asked me:

Is it possible to automatically detect files on a Linux server and even compile it?

Answer 1

I made a script and I am posting the details:

• Ease of use for designers
• The LESS compiler executes immediately after saving the file without using server resources.
• Any editor capable of remote editing will work with this solution - Code, Sublime Text, Textmate

---

First you need to install "npm" on the server by entering it in the console:

sudo apt-get install npm inotify-tools sudo npm install -g less sudo nano /usr/local/bin/lesscwatch 

Paste the following into the file:

 #!/bin/bash # Detect changes in .less file and automatically compile into .css [ "$2" ] || { echo "Specify both .less and .css files"; exit 1; } inotifywait . -m -e close_write | while read x op f; do. if [ "$f" == "$1" ]; then. lessc $f > $2 && echo "`date`: COMPILED";. fi done 

Save, exit, and then execute:

 sudo chmod +x /usr/local/bin/lesscwatch 

You are all done. The next time you need to work with your LESS files, you will need to open a terminal (Coda has a built-in), go to your file folder (using cd) and do the following:

 lesscwatch main.less main.css 

It will display information about successful compilations or errors. Enjoy it.

Answer 2

I have a modified @romaninsh solution to recompile when changing any smaller files in the directory. I also added an echo statement before compiling the Less files to provide some verification that the change was detected if the compilation took several seconds.

/ Usr / local / bin / lesscwatch:

 #!/bin/bash # Detect changes in .less file and automatically compile into .css [ "$2" ] || { echo "Specify both .less and .css files"; exit 1; } inotifywait . -m -e close_write | while read x op f; do if [[ "$f" == *".less" ]]; then echo "Change detected. Recompiling..."; lessc $1 > $2 && echo "`date`: COMPILED"; fi done 

This more closely mimics the behavior of Less.app for Mac, which I'm used to.

When developing with Less, I usually have a bunch of files in the / style directory of my project and compile everything into a single .css file using overrides.

Usage example:

base.less:

 @import "overrides.less"; @import "variables.less"; body { ... } 

Usage is the same as

 lesscwatch base.less base.css 

Answer 3

I would like a bash script, but I am having trouble using it with sublime wthin ubuntu 12.10. Well, the scripts did the same thing to Ian_Marcinkowski , but I’m sure that it continues to work after the first event, and also keeps track of all the files (for example, sublime text, use the tmp file and not change the original -!?!).

 #!/bin/bash # Detect changes in .less file and automatically compile into .css [ "$2" ] || { echo "Specify both .less and .css files"; exit 1; } inotifywait -m -e close_write . | while read x op f; do echo $f echo "Change detected. Recompiling..."; lessc $2 > $3 && echo "`date`: COMPILED"; done 

call the script like:

 ./monitor.sh </path/to/dir> <main.less> <main.css>