Отключить объединение и сокращение ресурсов в Symfony с Assetic


С помощью следующей конфигурации мои css-и javascript-файлы попадают в браузер уменьшенными и Объединенными, даже в среде разработки (которую я сейчас использую).

Как я могу заставить Assetic не объединять и не уменьшать эти файлы в среде разработки?

Приложения/конфигурации/конфигурация/YML в

assetic:
    debug:          %kernel.debug%
    use_controller: false
    bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
    filters:
        cssrewrite: ~
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        less:
            node: %less_node_bin%
            node_paths: [%less_node_modules%]
            apply_to: ".less$"
    assets:
        main_css:
            inputs:
                - %kernel.root_dir%/../web/css/file01.css
                - %kernel.root_dir%/../web/css/file02.css
                - %kernel.root_dir%/../web/css/file03.css
            output: css/main.css
            filter:
                - yui_css
                - less
        other_css:
            inputs:
                - %kernel.root_dir%/../web/css/file04.css
                - %kernel.root_dir%/../web/css/file05.css
                - %kernel.root_dir%/../web/css/file06.css
            output: css/other.css
            filter:
                - yui_css
                - less
        other_js:
            inputs:
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
            output: js/other.js
            filter:
                - yui_js
        main_js:
            inputs:
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file01.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file02.js
                - %kernel.root_dir%/../src/My/FirstBundle/Resources/public/js/file03.js
            output: js/main.js
            filter:
                - yui_js

App / config/config_dev.yml

assetic:
    debug:          %kernel.debug%
    use_controller: true
    bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
    filters:
        cssrewrite: ~
        yui_css:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
        yui_js:
            jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    assets:

Шаблон веточки:

<head>
    <meta charset="utf-8">
    <title>My title</title>
    {% block stylesheets %}
        <link rel="stylesheet" href="{{ asset('css/main.css') }}">
    {% endblock %}
    {% block javascripts %}
        <script src="{{ asset('js/main.js') }}"></script>
    {% endblock %}
    <!--
    Also tried this type of block, without success:
    {% block javascripts %}
        {% javascripts '@main_js' %}
            <script src="{{ asset_url }}"></script>
        {% endjavascripts %}
    {% endblock %}
    -->
</head>
3 3

3 ответа:

Дело в том, что " config.файл " yml " Всегда используется в всех средах. Например, в конфигурации dev enviroment.yml " и " config_dev.файлы yml " объединяются для формирования окончательной конфигурации.

Например, у нас есть config.yml файл с этим:

foo:
    bar: baz

И у нас есть config_dev.yml с чем-то вроде этого:

foo:
    go: run

Окончательная конфигурация будет иметь

foo:
    bar: baz
    go: run

Вы видите проблему? Вам нужно разместить prod определенную конфигурацию параметры (которые вы хотите использовать только в среде prod, как минификаторы js в вашем случае)не в конфигурации .YML файл, но в config_prod.файл yml .

Так что у вас должно быть что-то вроде этого в вашем config.yml :

assetic:
    assets:
        my_js_asset:
            inputs:
                ...

И что-то вроде этого в вашем config_prod.yml file

assetic:
    assets:
        my_js_asset:
            filters: [yui_js]
            output:  scripts.min.js

Правка 1:

Однако это исправит только проблему минимизации (и других возможных фильтров).

Может быть, я и ошибаюсь, но, насколько как я знаю, в настоящее время невозможно разделить различные входные файлы, определенные в одном и том же именованном активе. Логика этого заключается в ассетической реализации соответствующих тегов twig (узлов), поскольку отдельные файлы, которые они сами генерируются и могут быть найдены в целевом каталоге после выполнения команды assetic: dump в среде dev (или если атрибут параметра twig tag\javascripts "combine" имеет значение true). Если вы хотите проверить это и лучше понять реализацию, это хорошая отправная точка: https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Extension/Twig/AsseticNode.php

  • вам не нужно переопределять все настройки в config_dev.yml, достаточно просто переопределить опцию use_controller.
  • в вашем шаблоне используйте комментарий. Текущий будет использовать сброшенный актив, поэтому, если вы уже сбросили их в уменьшенном виде, он всегда будет использоваться, он никогда не будет использовать контроллер Assetic.
  • в config.yml, как говорит док, вы должны использовать - ?yui_css вместо - yui_css, Обратите внимание на ведущий знак вопроса (то же самое с yui_js). Тогда эти фильтры не будут использоваться в режиме отладки (в dev env)

Моя рекомендация-упростить конфигурацию.yml следующим образом:

assetic:
debug:          %kernel.debug%
use_controller: %kernel.debug%
bundles:        [ MyFirstBundle, MySecondBundle, MyThirdBundle ]
filters:
    cssrewrite: ~
    yui_css:
        jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    yui_js:
        jar: %kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar
    less:
        node: %less_node_bin%
        node_paths: [%less_node_modules%]
        apply_to: ".less$"

А затем настройте файлы CSS и JS в самом шаблоне макета:

<head>
    <meta charset="utf-8">
    <title>My title</title>

    {% stylesheets 'css/file01.css' 'css/file02.css' 'css/file03.css'
        filter='?yui_css, less' output='css/main.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

    {% stylesheets 'css/file04.css' 'css/file05.css' 'css/file06.css'
        filter='?yui_css, less' output='css/other.css' %}
        <link rel="stylesheet" href="{{ asset_url }}" />
    {% endstylesheets %}

    {% javascripts
        '@FirstBundle/Resources/public/js/thirdparty/file01.js'
        '@FirstBundle/Resources/public/js/thirdparty/file02.js'
        '@FirstBundle/Resources/public/js/thirdparty/file03.js'
        filter='?yui_js' output='js/other.js' %}
         <script src="{{ asset_url }}"></script>
    {% endjavascripts %}

    {% javascripts
        '@FirstBundle/Resources/public/js/thirdparty/file04.js'
        '@FirstBundle/Resources/public/js/thirdparty/file05.js'
        '@FirstBundle/Resources/public/js/thirdparty/file06.js'
        filter='?yui_js' output='js/main.js' %}
         <script src="{{ asset_url }}"></script>
    {% endjavascripts %}
</head>