Как минифицировать файлы при помощи UglifyJS и UglifyCSS

UglifyJS это JS парсер/компрессор/красотанаводитель. Используется для объединения и минификации JS assets, что уменьшает количество HTTP запросов и делает ваш сайт быстрым. UglifyCSS делает тоже самое только с CSS

В этой главе вы узнаете как устанавливать и использовать оба инструмента. Подробно рассмотрим только UglifyJS, т.к. UglifyCSS работает почти также

 

Установка UglifyJS

UglifyJS доступен как модуль Node.js и может быть установлен через npm.

  1. Установите Node.js ( от переводчика мне понравилось вот это )
  2. потом устанавливаем саму uglify

 

[su_spoiler open=”yes” icon=”” class=”my-spoiler caution” title=”от переводчика”]

Не забудьте поставить sudo, если ставите как глобальное приложение

[/su_spoiler]

Это команда поставит UglifyJS  глобально и может быть вызвана везде из под root

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Так же можно установить UglifyJS внутри проекта. Для этого надо

  1. Перейти в папку с проектом
  2. Создать папку node_modules
  3. Выполнить команду без -g

Закидывать в app/Resources это рекомендация. Вы всегда можете создать package.json и сотворить чудо ( указать зависимости здесь )

[/su_spoiler]

В зависимости от того как вы установили uglifyjs, так вам будет необходимо использовать её

Если глобально

Если локально

 Конфигурация uglifyjs2

Сейчас необходимо указать в конфигурации где находится исполняемый файл

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

Путь к исполняемумо файл UgliFyJS может меняться, в зависимости от ОС. Чтобы найти его, можно использовать

Это команда покажет папку, в которой находится исполняемый файл UglifyJS.

Если UglifyJS установлена локально, то вы файл будет в папке bin, которая находится в папку node_modules

[/su_spoiler]

[su_spoiler open=”yes” icon=”” class=”my-spoiler caution” title=”от переводчика”]

Для Ubuntu’водов

[/su_spoiler]

Теперь вы можете использовать фильтр uglifyjs2 в вашем проекте

Минифицировать ваши Assets

Для того чтобы использовать UglifyJS на ваших assets, нам надо применить его. Переходим в templates

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

В примере выше, подразумевается, что bundle называется AcmeFooBundle и JS файлы находятся в Resources/publis/js в этом бандле.

[/su_spoiler]

После добавления фильтра uglifyjs2 вы должны заметить что все стало просто летать 🙂

Отключение минификации в debug

Минифицированные файлы очень трудно читать, тем более дебажить. Поэтому Assetic позволяет отлючать минификацию файлов в debug моде. Для этого перед фильтром необходимо постваить знак ?. Теперь Assetic будет применять фильтр только если debug = false

Для того чтобы опробовать, переключитель в prod. Не забудь перед этим очистить кэш и дамп

[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]

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

Для большей информации смотри Filtering based on a File Extension

[/su_spoiler]

Установка, конфигурация и использование UglifyCSS

Использование UglifyCSS очень похоже на UglifyJS.

1. Установка

 2. Конфигурация

 3. Использование

Также как и для uglifyjs2 префикс ? работает и для uglifycss