Комбинирование, компиляция и уменьшение веб-ресурсов с помощью PHP-библиотек

Официальные лучшие практики Symfony рекомендуют использовать Assetic, чтобы управлять веб-ресурсами, кроме случаев, когда вам комфортно использовать фронт-энд иструменты, основанные на JavaScript.

Даже если эти решения, основанные на JavaScript, являются наиболее удобными с технической точки зрения, использование альтернативы в виде библиотек на чистом PHP может быть полезным в некоторых сценариях:

  • Если вы не можете установить или использовать npm и другие решения JavaScript;
  • Если вы предпочитаете ограничивать количество разных технологий, используемых в ваших приложениях;
  • Если вы хотите упростить развёртывание приложения.

В этой статье вы узнаете о том, как комбинировать и уменьшать файлы CSS и JavaScript, и как компилировать Sass-файлы, используя только PHP библиотеки с помощью Assetic.

Установка сторонних библиотек сжатия

Assetic включает в себя много готовых к ипользованию фильтров, но не включает связанные с ними библиотеки. Поэтому, перед тем, как включать фильтры, используемые в этой статье, вам нужно установить две библиотеки. Откройте командную консоль, перейдите к каталогу вашего проекта и выполните следующие команды:

1
2
$ composer require leafo/scssphp
$ composer require patchwork/jsqueeze

Организация ваших файлов веб-ресурсов

Этот пример будет включать в себя настройку с использованием фреймворка Bootstrap CSS, jQuery, FontAwesome и некоторых обычных CSS и JavaScriptфайлов приложения (под названием main.css и main.js). Рекомендуемая структура каталога для этой настройки выглядит так:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
web/assets/
├── css
│   ├── main.css
│   └── code-highlight.css
├── js
│   ├── bootstrap.js
│   ├── jquery.js
│   └── main.js
└── scss
    ├── bootstrap
    │   ├── _alerts.scss
    │   ├── ...
    │   ├── _variables.scss
    │   ├── _wells.scss
    │   └── mixins
    │       ├── _alerts.scss
    │       ├── ...
    │       └── _vendor-prefixes.scss
    ├── bootstrap.scss
    ├── font-awesome
    │   ├── _animated.scss
    │   ├── ...
    │   └── _variables.scss
    └── font-awesome.scss

Комбинирование и уменьшение CSS-файлов и компилирование SCSS-файлов

Для начала, сконфигурируйте новый фильтр Assetic scssphp:

  • YAML
    1
    2
    3
    4
    5
    6
    # app/config/config.yml
    assetic:
        filters:
            scssphp:
                formatter: 'Leafo\ScssPhp\Formatter\Compressed'
            # ...
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    <!-- app/config/config.xml -->
    <?xml version="1.0" charset="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="scssphp" formatter="Leafo\ScssPhp\Formatter\Compressed" />
            <!-- ... -->
        </assetic:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    8
    9
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
             'scssphp' => array(
                 'formatter' => 'Leafo\ScssPhp\Formatter\Compressed',
             ),
             // ...
        ),
    ));
    

Значение опции formatter - это полный класс имени форматировщика, используемого фильтром для производства скомпилированного CSS-файла. Использование сжатого форматировщика уменьшит итоговый файл, независимо от того, являются ли исходные файлы обычными CSS файлами или SCSS файлами.

Далее, обновите ваш шаблон Twig, чтобы добавить тег {% stylesheets %}, определённый Assetic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
{# app/Resources/views/base.html.twig #}
<!DOCTYPE html>
<html>
    <head>
        <!-- ... -->

        {% stylesheets filter="scssphp" output="css/app.css"
            "assets/scss/bootstrap.scss"
            "assets/scss/font-awesome.scss"
            "assets/css/*.css"
        %}
            <link rel="stylesheet" href="{{ asset_url }}" />
        {% endstylesheets %}

Эта простая конфигурация компилирует, комбинирует и уменьшает файлы SCSS в обычный файл CSS, который помещается в web/css/app.css. Это единственный CSS файл, который будет подан вашим посетителям.

Комбинрование и уменьшение файлов JavaScript

Для начала, сконфигурируйте новый фильтр Assetic jsqueeze следующим образом:

  • YAML
    1
    2
    3
    4
    5
    # app/config/config.yml
    assetic:
        filters:
            jsqueeze: ~
            # ...
    
  • XML
     1
     2
     3
     4
     5
     6
     7
     8
     9
    10
    11
    12
    13
    14
    15
    <!-- app/config/config.xml -->
    <?xml version="1.0" charset="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="jsqueeze" />
            <!-- ... -->
        </assetic:config>
    </container>
    
  • PHP
    1
    2
    3
    4
    5
    6
    7
    // app/config/config.php
    $container->loadFromExtension('assetic', array(
        'filters' => array(
             'jsqueeze' => null,
             // ...
        ),
    ));
    

Далее, обновите код вашего щаблона Twig, чтобы добавить тег {% javascripts %}, определённый Assetic:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
<!-- ... -->

    {% javascripts filter="?jsqueeze" output="js/app.js"
        "assets/js/jquery.js"
        "assets/js/bootstrap.js"
        "assets/js/main.js"
    %}
        <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    </body>
</html>

Эта простая конфигурация комбинирует все файлы JavaScript, уменьшает содержимое и сохраняет вывод в файле web/js/app.js, который подаётся вашим посетителям.

Начальный символ ?``в имени фильтра ``jsqueeze сообщает Assetic применять фильтр только вне режима debug. На практике, это означает, что во время разработки вы будете видеть неуменьшенные файлы, а уменьшенные - в окружении prod.

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