Nikovit <Путешествия и разработка>

Автоматическая минимизация css и js файлов в PhpStorm

Рассмотрим автоматическое создание минимизированных версий css и js файлов в PhpStorm


Минимизированный css

Для начала нам нужно скачать и установить nodejs, установка простая, особых сложностей там нету, просто нажимаем всегда далее, поэтому пункт установки nodejs особо описывать не буду(рекомендую только выбрать версию LTS как более стабильную).

После установки открываем консоль, либо встроенный терминал в PhpStorm:

2020-10-22 (7).png
И устанавливаем csso-cli необходимую для генерации минимизированных версий css файлов:
npm install -g csso-cli

Далее настраиваем File Watchers в PhpStorm, File -> Settings, нажимаем кнопку плюсика справа:
2020-10-22.png
и выбираем пункт CSSO CSS Optimizer

2020-10-22 (1).png
В появившемся окне параметры можно оставить по умолчанию.

2020-10-22 (2).png
Вот и все теперь при редактировании файла css рядом с редактируемым файлом будет создаваться минимизирования копия.

2020-10-22 (4).png


Минимизированный JS

Т.к. nodejs у нас уже установлен то перейдем сразу к установке uglify-js - утилиты для минимизации js.
npm install --g uglify-js

После установки настраиваем File Watchers, File -> Settings, нажимаем кнопку плюсика справа и выбираем пункт Uglify-js

2020-10-22 (5).png
В открывшемся окне настроек также ничего не меняем, оставляем все по умолчанию.

2020-10-22 (6).png


Все, теперь у нас создаются минимизированные файлы css и js, эта инструкция также актуальна для IntelliJ IDEA, PyCharm, WebStorm.