symfony - 如何使用assetic组织与symfony 2中包含的模板或嵌入式 Controller 相关的 Assets ？

Question

我真的很想在我的 symfony 2 项目中使用 Assets ，因为它有许多有用的功能，但我不确定实现以下要求的最佳方法。

我有几个 js 文件可以包含在所有页面中。但是，其中一些仅与页面模板的子集相关，我在其中包含特定模板(或还嵌入了特定 Controller )，这些模板需要那些特定的 javascript 文件。

现在我有以下选择:

我在布局和特定页面模板中为 javascripts 创建了一个块元素(我在其中包含了带有 javascript 的模板，例如 templateWithComplexJs.html.twig)，我使用 {{ parent() }} 覆盖了这个块，如下所述:Combining Assetic Resources across inherited templates .

{# ... specific.html.twig #}  
{% extends 'MyBundle::layout.html.twig' %}

...  
{% include 'MyBundle:Foo:templateWithComplexJs.html.twig' %}  
...  

{% block javascripts %}
    {{ parent() }}
    {% javascripts  
        '@MyBundle/Resources/public/js/specific/complex.js'  
    %}  
    <script src="{{ asset_url }}"></script>  
    {% endjavascripts %}  
{% endblock %}  

我看到的缺点:
a) 当我调整包含的模板(例如更新到新的 js 库)时，我必须调整所有包含它们的页面模板。在一个很容易导致错误的复杂系统中。
b) 有可能我两次包含一个 javascript，一次在布局中，一次在模板的 javascript 中，assetic 不知道，因为它们是分开处理的。

我在布局中包含了所有需要的 js 文件，然后当我调整包含的模板时我只需要更改一个地方，而且我不太可能包含两次 javascripts。

我看到的缺点:
由于 js 文件可能有很大的大小，我更愿意只在我真正需要它们的少数情况下包含它们。

在这个相关的问题 ( Twig Assetic Stylesheets Among Several Templates ) 中，它说目前无法通过 assetic 实现令人满意的解决方案，但我想我不是唯一一个有这些要求并且无论如何都想使用 assetic 的人。

那么，这种场景的最佳实践是什么？

Answer 1

您可能可以更简单地获得您的目标。在配置文件中设置您的 Assets 组并为其命名，而不是在所有模板中都这样做。这是一个快速示例。

# Assetic Configuration
assetic:
    debug:          %kernel.debug%
    use_controller:
        enabled:    false #%kernel.debug%
        profiler:   false
    java: /usr/bin/java
    node: /usr/bin/node
    assets:
        backend_css:
            inputs:
                - %kernel.root_dir%/../path/to/some/css/file.css
                - %kernel.root_dir%/../path/to/some/less/file.less
            filters:
                - less
            output: css/backend.css
        frontend_css:
            inputs:
                - %kernel.root_dir%/../path/to/some/css/file.css
                - %kernel.root_dir%/../path/to/some/less/file.less
            filters:
                - less
            output: css/frontend.css
        backend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/backend.js
        frontend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/frontend.js
        special_backend_js:
            inputs:
                - %kernel.root_dir%/../path/to/some/js/file.js
                - %kernel.root_dir%/../path/to/some/js/other.js
            filters:
                - yui_js
            output: js/special_backend.js
    filters:
        cssrewrite: ~
        cssembed: 
            jar: %kernel.root_dir%/Resources/java/cssembed-0.4.5.jar
        # closure:
        #     jar: %kernel.root_dir%/Resources/java/compiler.jar
        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_paths: [%kernel.root_dir%/Resources/node_modules]
            apply_to: "\.less$"

现在在您的 Twig 模板中，您可以简单地执行以下操作:

{% block javascript %}
<script src="{{ asset('js/backend.js') }}"></script>
{% endblock javascript %}

并为您的 css Assets 做同样的事情。这样，如果您想将另一个库添加到您的 backend.js 集合或包含一些 js 功能(如 special_backend)，它是您模板中的一个单行，当您进行更改时，您只需要处理您的配置定义。

我希望对你有所帮助。我确定还有其他方法可以完成此操作，但这是我的首选方法。