使用 Assetic 在 Symfony 中禁用组合和缩小资产

Question

通过以下配置，我的 css 和 javascript 文件可以缩小并组合到浏览器中，即使在开发环境（这是我目前使用的环境）中也是如此。

如何让 Assetic 在开发环境中既不合并也不缩小这些文件？

app/config/config/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>

Answer 1

您不需要覆盖config_dev.yml中的所有配置，只需覆盖use_controller选项即可。
在您的模板中，使用注释的模板。当前的将使用转储的资产，因此如果您已经将它们缩小转储，它将始终使用，它永远不会使用 Assetic 控制器。
在 config.yml 中，正如文档所说，您应该使用 - ?yui_css 而不是 - yui_css，请注意前导问号（与 yui_js 相同）。然后这些过滤器将不会在调试模式下使用（在开发环境中）

Answer 2

问题是 "config.yml" 文件总是在所有环境中使用。例如，在开发环境中 "config.yml" 和 "config_dev.yml" 文件合并形成最终配置。

例如我们有 config.yml 文件：

foo:
    bar: baz

我们有 config_dev.yml 像这样：

foo:
    go: run

最终配置会有

foo:
    bar: baz
    go: run

你看到问题了吗？你需要放置 prod 特定的配置参数（你希望只在 prod 环境中使用，比如你的情况下的 js minifiers）而不是 config.yml 文件，但在 config_prod.yml 文件中。

所以你的 config.yml:

中应该有这样的东西

assetic:
    assets:
        my_js_asset:
            inputs:
                ...

在你的config_prod.yml文件中有这样的东西

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

编辑 1：

但是，这只会解决缩小（和其他可能的过滤器）问题。

也许我错了，但据我所知，现在不可能将同一命名资产中定义的各种输入文件分开。这背后的逻辑在于相应的树枝标签（节点）的assetic实现，因为它们自身的单独文件是生成的，执行后可以在目标目录中找到assetic:dump 命令（或者如果 stylesheets\javascripts twig 标签的参数 "combine" 属性设置为 true）。如果您想检查它并更好地理解实现，这是一个很好的起点：https://github.com/kriswallsmith/assetic/blob/master/src/Assetic/Extension/Twig/AsseticNode.php

Answer 3

我的建议是将 config.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>

使用 Assetic 在 Symfony 中禁用组合和缩小资产

Disable combining and minifying assets in Symfony with Assetic

symfony

assetic

编辑 1：