Как применять фильтр Assetic к конкретному расширению

Как применять фильтр Assetic к конкретному расширению

Caution

Starting from Symfony 2.8, Assetic is no longer included by default in the Symfony Standard Edition. Refer to this article to learn how to install and enable Assetic in your Symfony application.

Фильтры Assetic могут быть применены к отдельным файлам, группам файлов или даже, как вы увидите здесь, к файлам, которые имеют конкретное расширение. Чтобы показать вам, как справиться с каждой ситуацией, представьте, что вы хотите использовать фильтр Assetic CoffeeScript, который компилирует файлы CoffeeScript в JavaScript.

Основная конфигурация - это просто пути к coffee, node и node_modules. Пример конфигурации может выглядеть так:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    # app/config/config.yml
    assetic:
        filters:
            coffee:
                bin:        /usr/bin/coffee
                node:       /usr/bin/node
                node_paths: [/usr/lib/node_modules/]
    
  • 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="coffee"
                bin="/usr/bin/coffee/"
                node="/usr/bin/node/">
                <assetic:node-path>/usr/lib/node_modules/</assetic:node-path>
            </assetic:filter>
        </assetic:config>
    </container>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'coffee' => array(
                'bin'  => '/usr/bin/coffee',
                'node' => '/usr/bin/node',
                'node_paths' => array('/usr/lib/node_modules/'),
            ),
        ),
    ));
    

Фильтр одного файла

Вы теперь можете обслужить один файл CoffeeScript как JavaScript из ваших шаблонов:

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

Это всё, что нужно для компиляции этого файла CoffeeScript и обслуживания его в качестве скомпилированного JavaScript.

Фильтр нескольких файлов

Вы также можете объединить несколько файлов CoffeeScript в единый файл вывода:

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

Теперь оба файла будут обслужены как единый файл, скомпилированный в обычный JavaScript.

Фильтрация, основанная на расширении файла

Одним из огромных преимуществ использования Assetic является сокращение количества файлов-ресурсов для уменьшения HTTP-запросов. Для того, чтобы полностью воспользоваться этим, было бы хорошо скомбинировать все ваши файлы JavaScript и CoffeeScript вместе, так как они будут всё равно обслужены, как JavaScript. К сожалению, просто добавление файлов JavaScript к файлам для комбинации, как было описано выше, не будет работать, так как обычные файлы JavaScript не переживут компиляцию CoffeeScript.

Проблемы можно избежать, использовав опцию apply_to, которая позволяет вам указывать, как фильтр должен быть всегда применён к конкретным расширениям файлов. В этом случае, вы можете указать, что фильтр coffee применяется ко всем файлам .coffee:

  • YAML
    1
    2
    3
    4
    5
    6
    7
    8
    # app/config/config.yml
    assetic:
        filters:
            coffee:
                bin:        /usr/bin/coffee
                node:       /usr/bin/node
                node_paths: [/usr/lib/node_modules/]
                apply_to:   '\.coffee$'
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <!-- 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="coffee"
                bin="/usr/bin/coffee"
                node="/usr/bin/node"
                apply-to="\.coffee$">
                <assetic:node-path>/usr/lib/node_modules/</assetic:node-path>
            </assetic:filter>
        </assetic:config>
    </container>
    
  • PHP
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
            'coffee' => array(
                'bin'        => '/usr/bin/coffee',
                'node'       => '/usr/bin/node',
                'node_paths' => array('/usr/lib/node_modules/'),
                'apply_to'   => '\.coffee$',
            ),
        ),
    ));
    

С этой опцией, вам больше не нужно указывать фильтр coffee в шаблоне. Вы также можете перечислить обычные файлы JavaScript, все из которых будут скомбинированы и отображены как единый файл JavaScript (и только файлы .coffee будут пропущены через фильтр CoffeeScript):

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

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