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

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

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.

Официальные лучшие практики 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.