UglifyJS - инструмент для объединения, сжатия (компрессии) JavaScript файлов. Он может быть использован для объединения и сжатия JavaScript файлов, что уменьшает размер HTTP ответов сервера и делает сайт более быстрым. UglifyCSS - похожий инструмент, но для CSS файлов.

Установка UglifyJS

UglifyJS представляет собой модуль Node.js. Поэтому вначале необходимо установить Node.js.

Пример установки для Ubuntu:

$ sudo apt-get install npm nodejs
$ sudo ln -s /usr/bin/nodejs /usr/bin/node

UglifyJS можно установить локально или глобально.

Глобальная установка

Глобальная установка позволяет всем Вашим проектам использовать одну версию UglifyJS, что упрощает его обслуживание. Установка производится следующей командой:

$ sudo npm install -g uglify-js

Теперь можно выполнять комнаду uglifyjs из любого места в системе.

$ uglifyjs --help

Локальная установка

При использовании специфической версии UglifyJS, Вы можете установить UglifyJS внутри проекта. Для этого нужно указать путь установки и не указывать команду -g.

$ cd /path/to/your/symfony/project
$ npm install uglify-js --prefix app/Resources

Рекомендуется устанавливать UglifyJS в папку app/Resources и добавить каталог node_modules в систему контроля версий.

После этого можно запустить uglifyjs команду из каталога node_modules:

$ "./app/Resources/node_modules/.bin/uglifyjs" --help

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

Для использования сжатия JavaScripts внутри Symfony проекта необходимо настроить uglifyjs2 фильтр

YAML

# app/config/config.yml
assetic:
    filters:
        uglifyjs2:
            # the path to the uglifyjs executable
            bin: /usr/local/bin/uglifyjs

XML

<!-- app/config/config.xml -->
<assetic:config>
    <!-- bin: the path to the uglifyjs executable -->
    <assetic:filter
            name="uglifyjs2"
            bin="/usr/local/bin/uglifyjs" />
</assetic:config>

PHP

// app/config/config.php
$container->loadFromExtension('assetic', array(
     'filters' => array(
         'uglifyjs2' => array(
             // the path to the uglifyjs executable
             'bin' => '/usr/local/bin/uglifyjs',
        ),
    ),
));

Путь расположения UglifyJS в разных системах может отличаться. Для того, чтобы узнать где npm хранит bin каталог, выполните команду:

$ npm bin -g

Команда выведет каталог в Вашей системе, где можно найти исполнимый файл UglifyJS.

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

Теперь у Вас есть доступ к фильтру uglifyjs2 в Вашем проекте.

Конфигурация расположения Nodejs

Assetic пытается найти node автоматически. Вы также можете указать путь к node:

YAML

# app/config/config.yml
assetic:
    # the path to the node executable
    node: /usr/bin/nodejs
    filters:
        uglifyjs2:
            # the path to the uglifyjs executable
            bin: /usr/local/bin/uglifyjs

XML

<!-- app/config/config.xml -->
<assetic:config
        node="/usr/bin/nodejs" >
    <assetic:filter
            name="uglifyjs2"
            bin="/usr/local/bin/uglifyjs" />
</assetic:config>

PHP

// app/config/config.php
$container->loadFromExtension('assetic', array(
     'node' => '/usr/bin/nodejs',
     'uglifyjs2' => array(
         // the path to the uglifyjs executable
         'bin' => '/usr/local/bin/uglifyjs',
     ),
));

Применение фильтра для сжатия файлов

Если вы используете UglifyJS, добавьте параметр filter в asset тег Вашего шаблона. Таким образом вы укажете Assetic использовать uglifyjs2 фильтр:

Twig

{% javascripts '@AppBundle/Resources/public/js/*' filter='uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

PHP

<?php foreach ($view['assetic']->javascripts(
     array('@AppBundle/Resources/public/js/*'),
     array('uglifyj2s')
) as $url): ?>
     <script src=" <?php echo $view->escape($url) ?>"></script>
<?php endforeach ?>

Оба примера подразумевают, что у Вас есть бандл AppBundle и JavaScript файлы находятся в директории Resources/public/js Вашего бандла. В любом случае, Вы можете подключать файлы из разных мест.

С применением фильтра uglifyjs2 к asset тегам, Вы увидите сжатые JavaScripts файлы, которые будут загружаться значительно быстрее.

Выключение сжатия в режиме отладки

Сжатые JavaScripts файлы очень тяжело читать при отладке. Поэтому Assetic позволяет отключать фильтр в режиме отладки (использование app_dev.php). Вы можете включить отладку путем добавления вопросительного знака (?) перед именем фильтра. Это сообщит Assetic, что нужно включать сжатие, когда режим отладки выключен (используется app.php):

Twig

{% javascripts '@AppBundle/Resources/public/js/*' filter='?uglifyjs2' %}
    <script src="{{ asset_url }}"></script>
{% endjavascripts %}

PHP

<?php foreach ($view['assetic']->javascripts(
     <array('@AppBundle/Resources/public/js/*'),
     <array('?uglifyjs2')
) as $url): ?>
     <script src="<?php echo $view->escape($url) ?>"></script>
<?php endforeach ?>

Попробовать сжатие можно, перевключившись в prod окружение. Но прежде не забудьте очистить кеш и сделать дамп файлов:

$ php app/console cache:clear --env=prod --no-debug

$ php app/console assetic:dump --env=prod --no-debug

Установка, настройка и использование UglifyCSS

Использование UglifyCSS полностью такое же, как и UglifyJS. Вначале проверте, что пакет node установлен:

# global installation
$ sudo npm install -g uglifycss

# local installation
$ cd /path/to/your/symfony/project
$ npm install uglifycss --prefix app/Resources

После этого добавьте конфигурацию:

YAML

# app/config/config.yml
assetic:
    filters:
        uglifycss:
            bin: /usr/local/bin/uglifycss

XML

<!-- app/config/config.xml -->
<assetic:config>
    <assetic:filter
            name="uglifycss"
            bin="/usr/local/bin/uglifycss" />
</assetic:config>

PHP

// app/config/config.php
$container->loadFromExtension('assetic', array(
     'filters' => array(
         'uglifycss' => array(
             'bin' => '/usr/local/bin/uglifycss',
         ),
     ),
));

Для сжатия CSS файлов добавьте Assetic stylesheets помощник:

Twig

{% stylesheets 'bundles/App/css/*' filter='uglifycss' filter='cssrewrite' %}
     <link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}

PHP

<?php foreach ($view['assetic']->stylesheets(
     array('bundles/App/css/*'),
     array('uglifycss'),
     array('cssrewrite')
) as $url): ?>
     <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" />
<?php endforeach ?>

Как и в случае с uglifyjs2 фильтром, если поставить вопросительный знак ? (т.е. ?uglifycss), сжатие будет только при выключенном режиме отладки.

Не забудьте о сжатии изображений и проверке кода.