4

多くの便利な機能があるので、symfony 2 プロジェクトで assetic を使用したいと思っていますが、次の要件を実装する最善の方法がわかりません。

すべてのページに含めることができる js ファイルがいくつかあります。ただし、それらの一部は、特定の JavaScript ファイルを必要とする特定のテンプレートを含める (または特定のコントローラーを埋め込む) ページ テンプレートのサブセットにのみ関連しています。

現在、次のオプションがあります。

  1. ここで説明されているように、レイアウトと特定のページ テンプレート (ここでは、javascript を使用してテンプレートを含めます。 :継承されたテンプレート全体で資産リソースを組み合わせる。

    {# ... 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 lib への更新)、それらが含まれているすべてのページ テンプレートを適応させる必要があります。エラーが発生しやすい複雑なシステム。
    b) javascript を 2 回 (レイアウトの JavaScript に 1 回、テンプレートの JavaScript に 1 回) 含めることがありますが、これらは別々に扱われるため、assetic にはわかりません。

  2. 必要なすべての js ファイルをレイアウトに含めます。その後、含まれているテンプレートを調整するときに1 つの場所を変更するだけで済み、JavaScript を 2 回含めることはほとんどありません。

    私が見る欠点:
    js ファイルはかなりのサイズになる可能性があるため、本当に必要な場合にのみ含めることをお勧めします。

この関連する質問 ( Twig Assetic Stylesheets Among Some Templates ) では、現在、asset を使用して満足のいく解決策を達成することは不可能であると書かれていますが、これらの要件を持ち、とにかく assetic を使用したいのは私だけではないと思います。

では、そのようなシナリオのベスト プラクティスは何ですか?

4

1 に答える 1

7

より簡単に目的のものが得られる可能性があります。すべてのテンプレートでこれを行うのではなく、構成ファイルでアセット グループをセットアップし、名前を付けます。簡単な例を次に示します。

# 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$"

小枝テンプレートで、次のようなことを簡単に実行できます。

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

css アセットについても同じことを行います。このように、別のライブラリを backend.js コレクションに追加したい場合、または special_backend のような js 機能のグループを含めたい場合は、テンプレート内の 1 つのライナーであり、変更を行うときに構成定義を処理するだけで済みます。

少しでもお役に立てば幸いです。これを行う方法は他にもあると思いますが、これが私の好みの方法です。

于 2014-01-02T22:36:16.903 に答える