Как автоматически скомпилировать LESS в CSS на сервере?

Мой друг-дизайнер вручную собирал свой LESS-файл и загружал его с помощью Coda (Remote Site), тратя много драгоценного времени. Он спросил меня:

Можно ли автоматически обнаружить изменение файла на сервере Linux и скомпилировать его вообще без задержки?

Источник

4 ответа

Решение

Я сделал сценарий, и я публикую детали:

  • Простота в использовании для дизайнеров
  • Выполняет 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

Он выведет информацию об успешных компиляциях или ошибках. Наслаждаться.

Источник

Я изменил решение @romaninsh, чтобы оно перекомпилировалось при изменении любых файлов Less в каталоге. Я также добавил оператор echo перед компиляцией файлов Less, чтобы обеспечить некоторую проверку того, что изменение обнаружено в случае, если компиляция занимает несколько секунд.

/ USR / местные / бен / 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
Источник

Мне бы понравился скрипт 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>
Источник

это сработало для меня:

  1. установка:
    sudo apt install node-lessenter

2. вот как его использовать.
lessc style.less style.css

Источник
Другие вопросы по тегам