Wie automatisch LESS in CSS auf dem Server kompilieren?

Question

Mein Freund-Designer hat seine LESS-Datei manuell kompiliert und mit Coda (Remote Site) hochgeladen, die viel wertvolle Zeit investiert hat. Er fragte mich:

Ist es möglich, Dateiänderungen auf dem Linux-Server automatisch zu erkennen und ohne Verzögerung überhaupt zu kompilieren?

Answer 1

Ich habe ein Skript gemacht und ich veröffentliche die Details:

• Einfach für Designer verwenden
• WENIGER Compiler Führt unmittelbar nach Datei gespeichert wird, ohne Server-Ressourcen verbraucht
• Jeder Editor, der Fern Bearbeitung wird mit dieser Lösung arbeiten - Code Sublime Text, Textmate

---

Zuerst müssen Sie "NPM" auf dem Server installieren, indem Sie diese in die Konsole eingeben:

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

Fügen Sie den folgenden in die Datei:

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

Speichern, Ausfahrt, dann ausführen:

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

Sie sind alle fertig. Nächstes Mal, wenn Sie mit Ihrem LESS-Dateien arbeiten müssen, müssen Sie Terminal öffnen (Coda hat eine eingebaute), in den Ordner der Datei gehen (cd verwenden) und führen diese:

lesscwatch main.less main.css 

Es wird gibt Informationen über erfolgreiche Zusammenstellungen oder Fehler aus. Genießen.

Answer 2

Ich habe die @ romaninsh-Lösung so geändert, dass sie neu kompiliert wird, wenn Less-Dateien im Verzeichnis geändert werden. Ich habe auch eine echo-Anweisung vor dem Kompilieren der Less-Dateien hinzugefügt, um eine Bestätigung zu geben, dass eine Änderung erkannt wurde, falls die Kompilierung einige Sekunden dauert.

/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 

Dieses enger um das Verhalten von Less.app für Mac nachahmt, die ich gewohnt bin.

Wenn ich mit Less entwickle, habe ich normalerweise eine Reihe von Dateien im Verzeichnis/style meines Projekts und kompiliere alles in eine einzige .css-Datei mit Überschreibungen.

Anwendungsbeispiel:

base.less:

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

body { 
    ... 
} 

Die Verwendung ist die gleiche wie

lesscwatch base.less base.css 

Answer 3

ich die Bash-Skript möchten, aber ich hatte einige Probleme es mit mit erhaben mit ubuntu 12.10. gut, die Skripte taten das gleiche Ian_Marcinkowski tut, aber ich bin sicher, es funktioniert nach dem ersten Ereignis, und alle Dateien überwachen (sublime Text someway, verwenden Sie eine tmp-Datei, und ändern Sie nicht das 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 

rufen Sie das Skript wie:

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