Come compilare automaticamente LESS in CSS sul server?

Question

Un mio amico progettista stava compilando il suo file LESS manualmente e caricandolo con Coda (Sito remoto) spendendo molto tempo prezioso. Mi ha chiesto:

È possibile rilevare automaticamente il cambio di file sul server Linux e compilare senza ritardo?

Answer 1

ho fatto uno script e ho pubblicare i dettagli:

• di facile uso per i progettisti
• esegue MENO compilatore subito dopo file viene salvato, senza consumare risorse del server
• Qualsiasi editore capaci di distanza editing lavorerà con questa soluzione - Codice, Sublime Text, TextMate

---

In primo luogo, è necessario installare "NPM" sul server digitando questo nella console:

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

Incollare il seguente nel 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 

Salva, uscire, quindi eseguire:

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

Hai finito. La prossima volta che hai bisogno di lavorare con i file di meno, sarà necessario aprire terminale (Coda ha un built-in), passare alla cartella del file (con CD) ed eseguire questo:

lesscwatch main.less main.css 

Sarà fornire informazioni su compilazioni o errori di successo. Godere.

Answer 2

Ho modificato la soluzione di @ romaninsh in modo che venga ricompilata quando vengono modificati tutti i file nella directory. Ho anche aggiunto un'istruzione echo prima di compilare i file Less, per fornire una conferma che è stata rilevata una modifica nel caso in cui la compilazione richieda alcuni secondi.

/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 

Questo imita più da vicino il comportamento dei Less.app per Mac che mi sono abituato.

In fase di sviluppo con Less, di solito ho un sacco di file nella directory/style del mio progetto e compili tutto in un unico file .css utilizzando le sostituzioni. esempio

Usage:

base.less:

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

body { 
    ... 
} 

l'utilizzo è lo stesso di

lesscwatch base.less base.css 

Answer 3

mi piacerebbe lo script bash, ma ho avuto qualche problema di utilizzarlo con sublime wthin ubuntu 12.10. well, fa lo stesso Ian_Marcinkowski fa, ma sono sicuro che continua a funzionare dopo il primo evento e controlla tutti i file (in qualche modo il testo sublime, usa un file tmp e non cambia quello originale -!?!) .

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

chiamata script come:

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