Как уменьшить JavaScript и таблицы стилей с помощью YUI компрессора

Caution

YUI компрессор больше не управляется Yahoo. Поэтому мы настоятельно советуем вам избегать использования YUI утилит кроме случаев, когда это действительно необходимо. Прочтите /assetic/uglifyjs, чтобы узнать о современной альтернативе.

Yahoo! предоставляет отличную утилиту для уменьшения JavaScript и таблиц стилей, чтобы они быстрее передавались по проводам - YUI компрессор. Благодаря Assetic, вы можете воспользоваться преимществами этого инструмента очень легко.

Скачайте YUI компрессор JAR

YUI компрессор написан на Java и распространяется, как JAR. Скачайте JAR с вебсайта Yahoo! и сохраните его в app/Resources/java/yuicompressor.jar.

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

Теперь вам нужно сконфигурировать в вашем приложении два фильтра Assetic, один для уменьшения JavaScript с YUI компрессором, а один для уменьшения таблиц стилей:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    # app/config/config.yml
    assetic:
        # java: '/usr/bin/java'
        filters:
            yui_css:
                jar: '%kernel.project_dir%/app/Resources/java/yuicompressor.jar'
            yui_js:
                jar: '%kernel.project_dir%/app/Resources/java/yuicompressor.jar'
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    <!-- app/config/config.xml -->
    <?xml version="1.0" encoding="UTF-8"?>
    <container xmlns="http://symfony.com/schema/dic/services"
        xmlns:assetic="http://symfony.com/schema/dic/assetic"
        xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
        xsi:schemaLocation="http://symfony.com/schema/dic/services
            http://symfony.com/schema/dic/services/services-1.0.xsd
            http://symfony.com/schema/dic/assetic
            http://symfony.com/schema/dic/assetic/assetic-1.0.xsd">
    
        <assetic:config>
            <assetic:filter
                name="yui_css"
                jar="%kernel.project_dir%/app/Resources/java/yuicompressor.jar" />
            <assetic:filter
                name="yui_js"
                jar="%kernel.project_dir%/app/Resources/java/yuicompressor.jar" />
        </assetic:config>
    </container>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        // 'java' => '/usr/bin/java',
        'filters' => array(
            'yui_css' => array(
                'jar' => '%kernel.project_dir%/app/Resources/java/yuicompressor.jar',
            ),
            'yui_js' => array(
                'jar' => '%kernel.project_dir%/app/Resources/java/yuicompressor.jar',
            ),
        ),
    ));
    

Note

Пользователям Windows стоит помнить об обновлении конфигурации до правильной локации Java. В Windows7 x64 бит, по умолчанию, это C:\Program Files (x86)\Java\jre6\bin\java.exe.

Теперь у вас есть доступ к двум новым фильтрам Assetic в вашем приложении: yui_css и yui_js. Они будут использовать YUI компрессор, чтобы уменьшить таблицы стилей и JavaScript, соответственно.

Уменьшение ваших ресурсов

Теперь у вас есть сконфигурированный YUI компрессор, но ничего не произойдёт, пока вы не примените один из этих фильтров к ресурсу. Так как ваши ресурсы являются частью уровня просмотра, эта работа проводится в ваших шаблонах:

  • Twig
    1
    2
    3
    {% javascripts '@AppBundle/Resources/public/js/*' filter='yui_js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->javascripts(
        array('@AppBundle/Resources/public/js/*'),
        array('yui_js')
    ) as $url): ?>
        <script src="<?php echo $view->escape($url) ?>"></script>
    <?php endforeach ?>
    

Note

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

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

  • Twig
    1
    2
    3
    {% stylesheets '@AppBundle/Resources/public/css/*' filter='yui_css' %}
        <link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}" />
    {% endstylesheets %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->stylesheets(
        array('@AppBundle/Resources/public/css/*'),
        array('yui_css')
    ) as $url): ?>
        <link rel="stylesheet" type="text/css" media="screen" href="<?php echo $view->escape($url) ?>" />
    <?php endforeach ?>
    

Отключение уменьшения в режиме отладки

Уменьшенные JavaScript и таблицы стилей очень сложно читать, не говоря уже об отладке. Из-за этого, Assetic позволяет вам отключить конкретный фильтр, когда ваше приложение находится в режиме отладки. Вы можете сделать это, использовав в вашем шаблоне в имени фильтра префикс со знаком вопроса: ?. Это сообщает Assetic применять это к фильтру только, когда режим отладки отключен.

  • Twig
    1
    2
    3
    {% javascripts '@AppBundle/Resources/public/js/*' filter='?yui_js' %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
    
  • PHP
    1
    2
    3
    4
    5
    6
    <?php foreach ($view['assetic']->javascripts(
        array('@AppBundle/Resources/public/js/*'),
        array('?yui_js')
    ) as $url): ?>
        <script src="<?php echo $view->escape($url) ?>"></script>
    <?php endforeach ?>
    

Tip

Вместо добавления фильтра к тегам ресурсов, вы можете также глобально включить его, добавив атрибут apply_to к конфигурации фильтра, напрмиер, в фильтре yui_js - apply_to: "\.js$". Чтобы применять фильтр только в производстве, добавьте это к файлу config_prod, а не к общему файлу конфигурации. Для того, чтобы узнать детали о применении фильтров по расширению файлов, см. Фильтрация, основанная на расширении файла.

Эта документация является переводом официальной документации Symfony и предоставляется по свободной лицензии CC BY-SA 3.0.