Как минифицировать файлы при помощи UglifyJS и UglifyCSS
UglifyJS это JS парсер/компрессор/красотанаводитель. Используется для объединения и минификации JS assets, что уменьшает количество HTTP запросов и делает ваш сайт быстрым. UglifyCSS делает тоже самое только с CSS
В этой главе вы узнаете как устанавливать и использовать оба инструмента. Подробно рассмотрим только UglifyJS, т.к. UglifyCSS работает почти также
Установка UglifyJS
UglifyJS доступен как модуль Node.js и может быть установлен через npm.
- Установите Node.js ( от переводчика мне понравилось вот это )
- потом устанавливаем саму uglify
|
1 |
$ npm install -g uglify-js |
[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 внутри проекта. Для этого надо
- Перейти в папку с проектом
- Создать папку node_modules
- Выполнить команду без -g
|
1 2 3 |
$ cd /path/to/symfony $ mkdir app/Resources/node_modules $ npm install uglify-js --prefix app/Resources |
Закидывать в app/Resources это рекомендация. Вы всегда можете создать package.json и сотворить чудо ( указать зависимости здесь )
[/su_spoiler]
В зависимости от того как вы установили uglifyjs, так вам будет необходимо использовать её
Если глобально
|
1 |
$ uglifyjs --help |
Если локально
|
1 |
./app/Resources/node_modules/.bin/uglifyjs --help |
Конфигурация uglifyjs2
Сейчас необходимо указать в конфигурации где находится исполняемый файл
|
1 2 3 4 5 6 |
# app/config/config.yml assetic: filters: uglifyjs2: # the path to the uglifyjs executable bin: /usr/local/bin/uglifyjs |
[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]
Путь к исполняемумо файл UgliFyJS может меняться, в зависимости от ОС. Чтобы найти его, можно использовать
|
1 |
$ npm bin -g |
Это команда покажет папку, в которой находится исполняемый файл UglifyJS.
Если UglifyJS установлена локально, то вы файл будет в папке bin, которая находится в папку node_modules
[/su_spoiler]
[su_spoiler open=”yes” icon=”” class=”my-spoiler caution” title=”от переводчика”]
Для Ubuntu’водов
|
1 |
$ /usr/bin/uglifyjs |
[/su_spoiler]
Теперь вы можете использовать фильтр uglifyjs2 в вашем проекте
Минифицировать ваши Assets
Для того чтобы использовать UglifyJS на ваших assets, нам надо применить его. Переходим в templates
|
1 2 3 |
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='uglifyjs2' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} |
[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
|
1 2 3 |
{% javascripts '@AcmeFooBundle/Resources/public/js/*' filter='?uglifyjs2' %} <script src="{{ asset_url }}"></script> {% endjavascripts %} |
Для того чтобы опробовать, переключитель в prod. Не забудь перед этим очистить кэш и дамп
[su_spoiler open=”yes” icon=”” class=”my-spoiler note” title=””]
Вместо того чтобы каждый раз добавлять фильтр, вы можете добавить атрибут в конфигурационный файл, для ассоциации фильтра с расширением файлов, например
|
1 |
apply_to: "\.js$" |
Для большей информации смотри Filtering based on a File Extension
[/su_spoiler]
Установка, конфигурация и использование UglifyCSS
Использование UglifyCSS очень похоже на UglifyJS.
1. Установка
|
1 |
$ npm install -g uglifycss |
2. Конфигурация
|
1 2 3 4 5 |
# app/config/config.yml assetic: filters: uglifycss: bin: /usr/local/bin/uglifycss |
3. Использование
|
1 2 3 |
{% stylesheets 'bundles/AcmeFoo/css/*' filter='uglifycss' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %} |
Также как и для uglifyjs2 префикс ? работает и для uglifycss