How to automatically compile LESS into CSS on the server?

Question

Friend designer of mine was compiling his LESS file manually and uploading it with Coda (Remote Site) spending lots of precious time. He asked me:

Is it possible to automatically detect file change on the Linux server and compile without delay at all?

Answer 1

I have made a script and I publish the details:

• Easy to use for designers
• Executes LESS compiler immediately after file is saved, without consuming 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 typing this into 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, then execute:

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

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

lesscwatch main.less main.css

It will output information about successful compilations or errors. Enjoy.

Answer 2

this worked for me :

1. instalation:
   sudo apt install node-lessenter

2.this is how to use it.
lessc style.less style.css

Answer 3

i'd like the bash script but I had some trouble using it with sublime wthin ubuntu 12.10 . well, the scripts did the same Ian_Marcinkowski does, but I am sure it keeps working after first event, and monitor all files (sublime text someway, use a tmp file, and do not change the original one - !?!).

#!/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>

Answer 4

I have modified @romaninsh's solution so that it will recompile when any Less files in the directory are changed. I have also added an echo statement before compiling the Less files, to provide some validation that a change has been detected in case compilation takes a few 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 behaviour of Less.app for Mac that I am used to.

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

Usage example:

base.less:

@import "overrides.less";
@import "variables.less";

body {
   ...
}

The usage is the same as

lesscwatch base.less base.css