Автоматическая компиляция css в PhpStorm

mbaev 27.04.2016, 10:22

Сейчас активно используются три типа метаязыков: SCSS, SASS (что. в общем-то, является улучшенным SСSS) и LESS. Для того, чтобы работать с ними, не задумываясь о процессе компиляции в css нужно выполнить два шага:

  1. Установить компилятор
  2. Настроить PhpStorm

Так же, здесь есть и свои проблемы, но о них позже.

Установка компилятора

В интернете достаточно мануалов по установке компиляторов. Не буду заострять на них внимание, лишь кину пару ссылок на материалы по установке:

Настройка PhpStorm

Каждому нравится свой подход и свои настройки. В одно и тоже время PhpStorm для одного будет божественно настроенный, для другого - неприятный редактор. Я опишу один из способов настройки, которым пользуюсь сам.
Настраивая компилятор в PhpStorm'е, я преследовал цель безмятежной разработки тем и модулей в Drupal'е, а именно: при такой структуре каталогов

  1. Module
  2.   |--css
  3.   |  |--module.css
  4.   |--less
  5.   |  |--module.less
  6.   |--module.info
  7.  
  8. // или
  9.  
  10. Theme
  11.   |--css
  12.   | |--theme.css
  13.   |--less
  14.   | |--theme.less
  15.   |--theme.info

что составляет 99% всех модулей и тем мне было важно работать с файлом *.less, а компилятор автоматически компилировал все в папку css.
Итак, настройки PhpStorm.

  1. Открываем настройки
    phpstorm file watchers

  2. Создаем новый watcher
    Adding less watcher
    UPD. 18.05.2017:
    Обновленное окно в версии PhpStorm 2017.1.2 для Linux выглядит так
    phpstorm 2017.1.2 watcher
  3. На этом этапе заполняем все поля как на скриншоте. Строки для заполнения:
    1. Arguments: --no-color $FileName$
    2. Working directory: $FileDir$
    3. Output path to refresh: ../css/$FileNameWithoutExtension$.css
    P.S. В аргументы можно добавить ключ -x для минимизации css файла. Теперь минификатор вынесен в отдельный плагин - http://lesscss.org/usage/#v2-upgrade-guide-clean-css. Установив его, можно также добавить ключ --clean-css для минимизации, вместо -x.
  4. Пьем кофе

Пробуем

  • Открываем любой модуль и создаем папку any-module/less
  • Создаем там файл test.less
    После создания less-файла появится появится файл стилей any-module/css/test.css
    Появился? Значит вы все делаете правильно, а если нет, значит сегодня не ваш день...
  • Открываем (less), редактируем, сохраняем.
    Пример,
    1. body {
    2.   background-image: svg-gradient(to right, red, green 30%, blue);
    3. }
  • В момент сохранения вы уже должны видеть такую картину
    Compiling styles
  • Открываем any-module/css/test.css, видим:
    1. body {
    2.   background-image: url('data:image/svg+xml;base64,PD94bW/*...*/0KSIgLz48L3N2Zz4=');
    3. }

Нюансы

  1. Если мы создаем файл less для того, чтобы подключить его через @import, то будет создан аналогичный файл css.
    Решения
    • сначала прописывать @import "несуществующий-файл", а потом его создавать, при этом PhpStorm ругнётся, что вы подключаете несуществующий файл.
    • создать файл less, подключить его и удалить соответствующий файл css.
      Import less file
  2. Относится к п.1. Если мы создаем файл, который планируем подключить где-то внутри структуры каталогов, то соответствующий файл, будет создан не там где ожидается.
    incorrect directory
    Так происходит потому, что мы указали: Output path to refresh: ../css/$FileNameWithoutExtension$.css
    Решение: нет решения - смиритесь.

Profile picture for user KosHta

Гость , ,

Как настроить настроить авторастановку вендорных префиксов при компиляции css

Profile picture for user mbaev

mbaev , ,

Можно использовать те же вотчеры:
watchers

  1. UglifyJS, который сам может выполнять кучу тасков последовательно. Например, сначала препроцессор, потом постпроцессор (автопрефиксер).
  2. Создать свой вотчер.

По сути вотчер - это всего лишь UI для билдинга команды, выполняемой при изменении файлов. За изменением файлов следит сам PhpStorm. А весь этот выпадающий список - это всего лишь предзаполненные шаблоны. Это значит, что вы можете написать свой BATник и shell и использовать его в качестве вотчера.

Profile picture for user KosHta

Николай , ,

Спасибо, помогло!