私の友人デザイナーは自分のLESSファイルを手作業でコンパイルし、Coda(リモートサイト)でアップロードして貴重な時間を費やしていました。彼は私に尋ねました:サーバー上でLESSを自動的にCSSにコンパイルする方法は?
Linuxサーバー上のファイルの変更を自動的に検出して、まったくコンパイルすることはできますか?
私の友人デザイナーは自分のLESSファイルを手作業でコンパイルし、Coda(リモートサイト)でアップロードして貴重な時間を費やしていました。彼は私に尋ねました:サーバー上でLESSを自動的にCSSにコンパイルする方法は?
Linuxサーバー上のファイルの変更を自動的に検出して、まったくコンパイルすることはできますか?
私は、スクリプトを作っていると私は詳細を公開:
をまず、あなたがコンソールにこれを入力して、サーバー上の「NPM」をインストールする必要があります。その後、
#!/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 apt-get install npm inotify-tools
sudo npm install -g less
sudo nano /usr/local/bin/lesscwatch
は、ファイルに次のように貼り付け
sudo chmod +x /usr/local/bin/lesscwatch
すべて完了です。あなたがLESSファイルを操作する必要がある次の時間は、あなたがターミナルを開く必要があります、(CDを使用して)ファイルのフォルダに移動し、実行(Codaは組み込まれている)この:
lesscwatch main.less main.css
それがします成功したコンパイルまたはエラーに関する情報を出力します。楽しい。
私は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:これは、より密接に私が使用していますMac用のLess.appの行動を模倣
#!/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を使用して開発する場合は、通常、プロジェクトの/ styleディレクトリに多数のファイルがあり、すべてを上書きして1つの.cssファイルにコンパイルします。
使用例:
base.less:使用量が
lesscwatch base.less base.css
スペースを含むパスに出力CSSファイルを保存する場合は、7行目を 'lessc $ 1> '$ 2' && echo" \ 'date \'に変更してください:COMPILED ";' – jimmy
と同じである
@import "overrides.less";
@import "variables.less";
body {
...
}
私は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
コールのようなスクリプト:あなたがDrupalのを使用している場合
./monitor.sh </path/to/dir> <main.less> <main.css>
、[縮小](https://drupal.org/project/less)モジュールが自動的に任意の少ないファイルを処理します。 – kenorb