Вы здесь

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

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

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

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

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

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

Настройка PhpStorm

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

Module
  |--css
  |  |--module.css
  |--less
  |  |--module.less
  |--module.info

// или

Theme
  |--css
  | |--theme.css
  |--less
  | |--theme.less
  |--theme.info

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

  1. Открываем настройки
    phpstorm-file-watchers-settings
  2. Создаем новый watcher
    phpstorm-add-file-watcher
    На этом этапе заполняем все поля как на скриншоте. Строки для заполнения:

    • Arguments: --no-color $FileName$
    • Working directory: $FileDir$
    • Output path to refresh: ../css/$FileNameWithoutExtension$.css

    P.S.: В аргументы можно добавить ключ -x для минимизации css файла. <- Устарело!
    Теперь минификатор вынесен в отдельный плагин - http://lesscss.org/usage/#v2-upgrade-guide-clean-css. Установив его, можно также добавить ключ --clean-css для минимизации, вместо -x. Спасибо @DaHacka

  3. Пьем кофе.

Пробуем

  • Открываем любой модуль и создаем папку any-module/less
  • Создаем там файл test.less
    После создания less-файла появится появится файл стилей any-module/css/test.css
    Появился? Значит вы все делаете правильно, а если нет, значит сегодня не ваш день...
  • Открываем (less), редактируем, сохраняем.
    Пример,

    body {
        background-image: svg-gradient(to right, red, green 30%, blue);
    }
    
  • В момент сохранения вы уже должны видеть такую картину
    phpstorm-compilling-styles

  • Открываем any-module/css/test.css, видим:

    body {
        background-image: url('data:image/svg+xml;base64,PD94bW/*...*/0KSIgLz48L3N2Zz4=');
    }
    

Нюансы

  1. Если мы создаем файл less для того, чтобы подключить его через @import, то будет создан аналогичный файл css.
    Решения

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

--
blog-maksima-baevaСтатья с блога Максима Баева

2
12
27.04.2016 - 11:34

Комментарии

Аватар пользователя UksusoFF
UksusoFF – 27.04.2016 - 20:44

Хоть бы целиком чтоли разместили.

Аватар пользователя mbaev
mbaev – 28.04.2016 - 08:55

Специально для Вас! ;)

Аватар пользователя mbaev
mbaev – 28.04.2016 - 15:28

Да, ты прав. Есть еще пара-тройка других способов компиляции.

Все они разные и каждый сам для себя выбирает как ему удобней.
По скорости же, у меня есть проект в котором около 8к строк стилей (разбитых по файлам) и они компилируются быстрее чем фокус переключается из IDE в браузер и сайт с ними успевает обновиться.

Аватар пользователя mbaev
mbaev – 10.05.2016 - 09:27

Я говорю лишь о своем опыте. То чем я пользуюсь и то как это работает, меня и других разработчиков из нашей команды вполне устраивает.
Также я не писал, что ссылки ведут на компиляторы или на бесплатный софт. PhpStorm тоже платный, но это уже оффтоп.

Аватар пользователя Chi
Chi – 30.04.2016 - 17:35

libsass даже для руби имеет обёртку.
https://github.com/sass/sassc-ruby

Хотя если скорость устраивает, то конечно нет причин менять компилятор.

Аватар пользователя Chi
Chi – 30.04.2016 - 17:25

Сам компилятор написан на С++.

Аватар пользователя Vitaliy
Vitaliy – 10.07.2016 - 14:13

А есть ли инструменты в phpstorm для компиляции postcss?

Аватар пользователя mbaev
mbaev – 11.10.2016 - 09:08

К сожалению, нет. Но там есть, так называемые watcher's. Есть уже предустановленные типа less, sass и т.д. Но вы также можете создать свой собственный вотчер.