Печатает... Список заметок

Файл-вочеры в ПХП-шторме

Файл-вочеры (File watchers) в ПХП-шторме — система, позволяющая отслеживать изменения в файлах и запускать сторонние инструменты (компиляторы, минификаторы и пр.) с предустановленными настройками.

ПХП-шторм позволяет выбрать один из предустановленных вариантов или настроить кастомный.

Я в повседневной работе пользуюсь четырьмя файл-вочерами:

  • SCSS — компилирует SCSS-файлы;
  • CSSO — минифицирует стили;
  • UglifyJS — минифицирует скрипты;
  • Autoprefixer CLI — автоматически расставляет браузерные префиксы в стилях.

Первые три уже были в среде, а автопрефиксер я добавил самостоятельно.

Подробнее о файл-вочерах можно прочесть в документации а я далее просто приведу свои примеры настройки.

SCSS

Program: /usr/local/bin/node-sass
Arguments: $FileName$ $ProjectFileDir$/css/$FileNameWithoutExtension$.css
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map
Working directory: $FileDir$

Отключаю опцию «Auto-save edited files to triger the watcher», тогда вочер компилирует файл только после явного сохранения. Когда опция включена компилятор иногда ругается на отсутствие переменной или файла быстрее чем я допишу их имя.

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

CSSO

Program: csso
Arguments: -i $FileName$ -o $ProjectFileDir$/css/$FileNameWithoutExtension$.min.css
Output paths to refresh: $ProjectFileDir$/css/$FileNameWithoutExtension$.min.css
Working directory: $FileDir$

UglifyJS

Program: /usr/local/bin/uglifyjs
Arguments: $FileName$ -o $ProjectFileDir$/js/$FileNameWithoutExtension$.min.js
Output paths to refresh: $ProjectFileDir$/js/$FileNameWithoutExtension$.min.js
Working directory: $FileDir$

Autoprefixer CLI

Program: /usr/local/bin/autoprefixer-cli
Arguments: $FileName$ -b "last 20 versions" -d $ProjectFileDir$/css
Output paths to refresh: $ProjectFileDir$/css/$FileName$
Working directory: $ProjectFileDir$/public/theme/nw/css

Прежде чем использовать автопрефиксер, его нужно установить. Смотрите инструкцию на «Гитхабе»

Эта статья, прежде всего, личная памятка. Не факт что всё настроено лучшим образом и будет в такой конфигурации работать у вас. Если есть мысли как сделать лучше, буду рад услышать вас в комментариях.