Автоматическое создание минимизированных CSS и JS файлов в PhpStorm

Автоматическое создание минимизированных CSS и JS файлов в PhpStorm

При разработке сайтов удобно автоматически создавать минимизированные версии CSS и JavaScript-файлов. Это позволяет уменьшить размер файлов, ускорить загрузку сайта и избавиться от ручной минификации перед загрузкой проекта на сервер.

В этой статье рассмотрим настройку автоматической минификации CSS и JS в PhpStorm с помощью File Watchers.

Установка Node.js

Для начала необходимо установить Node.js.

Установка стандартная — достаточно нажимать кнопку «Далее». Рекомендую выбирать версию LTS, так как она считается наиболее стабильной.

Автоматическая минификация CSS в PhpStorm

После установки Node.js открываем консоль или встроенный терминал в PhpStorm:

Теперь устанавливаем утилиту csso-cli, которая будет создавать минимизированные CSS-файлы:

npm install -g csso-cli

Настройка File Watchers для CSS

Далее открываем настройки PhpStorm:

File → Settings

Переходим в раздел File Watchers, нажимаем кнопку плюса справа и выбираем:

CSSO CSS Optimizer

В появившемся окне настройки можно оставить по умолчанию.

После этого при сохранении CSS-файла рядом автоматически будет создаваться минимизированная версия файла.

Автоматическая минификация JS в PhpStorm

Так как Node.js уже установлен, можно сразу перейти к установке утилиты uglify-js для минимизации JavaScript-файлов.

npm install -g uglify-js

Настройка File Watchers для JavaScript

Снова открываем:

File → Settings → File Watchers

Нажимаем кнопку плюса и выбираем:

UglifyJS

В настройках также ничего менять не нужно — параметры по умолчанию подходят для большинства задач.

Итог

После настройки File Watchers PhpStorm будет автоматически создавать минимизированные версии CSS и JS-файлов при каждом сохранении.

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

Инструкция также актуальна для:

• WebStorm;
• IntelliJ IDEA;
• PyCharm.