如何在服務器上自動編譯LESS到CSS？

我的朋友設計師手動編譯他的LESS文件，並用Coda（遠程站點）上傳它花費大量寶貴的時間。他問我：如何在服務器上自動編譯LESS到CSS？

是否有可能在Linux服務器上自動檢測文件更改並且毫不拖延地進行編譯？

2012-11-28 romaninsh

如果您使用的Drupal，[更少]（https://drupal.org/project/less）模塊自動處理任何文件，少給你。 – kenorb

我已經做了劇本，我發佈的詳細信息：

易於使用的設計
執行文件被保存後立即LESS編譯器，不佔用服務器資源能夠遠程
任何編輯器編輯將與此解決方案的工作 - 代碼，崇高的文本，TextMate的

首先，你需要通過鍵入以下到控制檯在服務器上安裝「故宮」：

sudo apt-get install npm inotify-tools 
sudo npm install -g less 
sudo nano /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" == "$1" ]; then. 
     lessc $f > $2 && echo "`date`: COMPILED";. 
    fi 
done

保存，退出，然後執行：

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

你們都完成了。你需要用減檔的工作下一次，你需要打開終端（科達有一個內置的），去你的文件的文件夾（使用CD），並執行這樣的：

lesscwatch main.less main.css

它將輸出關於成功編譯或錯誤的信息。請享用。

來源

2012-11-28 16:45:01 romaninsh

我在Ubuntu上找到了，我不得不安裝nodejs包，並修改lessc腳本（/ usr/local/bin/lessc），以使用nodejs作爲可執行文件，而不是節點。也就是說，將/ usr/local/bin/lessc的第一行更改爲＃！/ usr/bin/env nodejs。我喜歡這個解決方案;感謝您發佈它！ – Clark

我不喜歡我的bash，但我的系統有格式問題。如果我刪除了行結束點，並將'do'和'then'移到他們自己的行（並刪除了分號），它就會運行起來。謝謝！ –

我修改了@ romaninsh的解決方案，以便在目錄中的任何Less文件被更改時重新編譯。在編譯Less文件之前，我還添加了一條echo語句，以提供一些驗證，說明編譯過程需要幾秒鐘才能檢測到更改。

在/ 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

這更加緊密地模仿，我用來Less.app爲Mac行爲。

使用Less開發時，通常在我的項目的/ style目錄中有一堆文件，並使用覆蓋將所有內容編譯成一個.css文件。

用例：

base.less：

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

body { 
    ... 
}

用法是一樣的

lesscwatch base.less base.css

來源

2013-02-03 18:11:10

如果你希望輸出的css文件被保存在一些包含空格的路徑中，把第7行改爲'lessc $ 1>「$ 2」&& echo「\'date \'：COMPILED」;' – jimmy

我想在bash腳本，但我不得不使用它與一些麻煩崇高wthin Ubuntu 12.10。好吧，腳本也一樣Ian_Marcinkowski does，但我確定它會在第一個事件後繼續工作，並且監視所有文件（一些文本，使用tmp文件，不要改變原始文件 - ！？！）。

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

調用腳本，如：

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

來源

2014-02-28 20:03:31

如何在服務器上自動編譯LESS到CSS？

回答

相關問題