How to automatically compile LESS into CSS on the server? - css

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

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

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

this worked for me :
instalation:
sudo apt install node-lessenter
2.this is how to use it.
lessc style.less style.css