10

私の友人のデザイナーは、自分の LESS ファイルを手動でコンパイルし、Coda (リモート サイト) にアップロードするのに多くの貴重な時間を費やしていました。彼は私に尋ねました：

Linux サーバー上のファイルの変更を自動的に検出し、遅延なくコンパイルすることはできますか?

4

4 に答える 4

12

スクリプトを作成し、詳細を公開します。

  • デザイナーにとって使いやすい
  • サーバー リソースを消費することなく、ファイルが保存された直後に LESS コンパイラを実行します。
  • リモート編集が可能なエディターは、このソリューションで動作します - Code、Sublime Text、Textmate

まず、コンソールに次のように入力して、サーバーに「npm」を​​インストールする必要があります。

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

これで完了です。次に LESS ファイルを操作する必要がある場合は、ターミナル (Coda にはビルトインがあります) を開き、(cd を使用して) ファイルのフォルダーに移動し、これを実行する必要があります。

lesscwatch main.less main.css

成功したコンパイルまたはエラーに関する情報を出力します。楽しみ。

于 2012-11-28T16:45:01.717 に答える
3

ディレクトリ内のLessファイルが変更されたときに再コンパイルされるように、@romaninshのソリューションを変更しました。また、コンパイルに数秒かかる場合に変更が検出されたことを確認するために、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

これは、私が慣れ親しんでいる Mac 用の Less.app の動作をより厳密に模倣しています。

Less で開発する場合、私は通常、プロジェクトの /style ディレクトリに多数のファイルを置き、オーバーライドを使用してすべてを 1 つの .css ファイルにコンパイルします。

使用例:

base.less:

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

body {
   ...
}

使い方は同じです

lesscwatch base.less base.css
于 2013-02-03T18:11:10.923 に答える
2

bashスクリプトが欲しいのですが、ubuntu 12.10で崇高に使用するのに問題がありました。まあ、スクリプトはIan_Marcinkowskiと同じことをしましたが、最初のイベントの後も動作し続け、すべてのファイルを監視していると確信しています (何らかの方法で崇高なテキストを使用し、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-28T20:03:31.413 に答える