¿Cómo organizar activos relacionados con plantillas incluidas o controladores integrados en Symfony 2 con assets?

Realmente me gustaría usar assetic en mi proyecto Symfony 2, ya que tiene muchas características útiles, pero no estoy seguro de cuál es la mejor manera de implementar el siguiente requisito.

Tengo varios archivos js que se pueden incluir en todas las páginas. Sin embargo, algunos de ellos están relacionados solo con un subconjunto de plantillas de página, en las que incluyo plantillas específicas (o también incorporo controladores específicos), que requieren esos archivos javascript específicos.

Ahora tengo las siguientes opciones:

  1. Creo un elemento de bloque para los javascripts en el diseño y en las plantillas de página específicas (donde incluyo las plantillas con javascript, por ejemplo, templateWithComplexJs.html.twig), sobrescribo este bloque usando {{ parent() }}, como se describe aquí : Combinando recursos de Assetic en plantillas heredadas. 

    {# ... 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 %}

    Las desventajas que veo:
    a) Cuando adapto una plantilla incluida (por ejemplo, actualizo a una nueva js lib), tengo que adaptar todas las plantillas de página, donde están incluidas. En un sistema complejo que fácilmente puede conducir a errores.
    b) Puede suceder que incluya un javascript dos veces, una en el diseño y otra en el javascript de la plantilla, assetic no sabe porque se tratan por separado.

  2. Incluyo todos los archivos js necesarios en el diseño, luego solo tengo que cambiar una lugar cuando adapto las plantillas incluidas y es poco probable que incluya javascripts dos veces.

    La desventaja que veo:
    Como los archivos js pueden tener un tamaño significativo, preferiría incluirlos solo en los pocos casos en que realmente los necesito.

En esta pregunta relacionada ( Hojas de estilo Twig Assetic entre varias plantillas ) dice que actualmente no es posible con assetic lograr una solución satisfactoria, pero supongo que no soy el único que tiene estos requisitos y quiere usar assetic de todos modos.

Entonces, ¿cuál es la mejor práctica para ese tipo de escenario?

preguntado el 12 de junio de 12 a las 21:06

Con respecto a su primera opción, ¿conoce la etiqueta de inserción de twig?ramita.sensiolabs.org/doc/tags/embed.html Podría ayudarlo a agrupar todos los activos en un archivo y luego decidir dentro de la plantilla cuáles usar. -

Gracias, pero no veo cómo esto podría resolverlo; Todavía tendría que adaptar todos los bloques en todas las plantillas ... Me gustaría saber cómo se aborda el problema en sitios web complejos y diversos, donde muchas páginas tienen diferentes combinaciones de bibliotecas de javascript, dependiendo de sus elementos utilizados (ya sean controladores integrados, plantillas incluidas o etiquetas incrustadas)... -

Eso es cierto. Pero, ¿realmente necesitas ser tan específico? ¿Los scripts js chocan o son muy grandes? Minimizarlos/combinarlos podría ser suficiente si no estamos hablando de millones de solicitudes por segundo. Antes de entrar en configuraciones muy complicadas, las combinaría y usaría algún tipo de CND. Si el rendimiento es realmente malo aunque el CND funciona bien, seguiría adelante y pensaría en soluciones más específicas. Pero estamos hablando del 5% superior de las páginas web que existen. -

solo curiosidad, ¿qué terminaste haciendo? Estoy enfrentando el mismo problema ... especialmente la duplicación de activos:

1 Respuestas

Es probable que pueda obtener lo que busca de manera más simple. Configure sus grupos de activos en un archivo de configuración y asígneles nombres en lugar de hacer esto en todas sus plantillas. Aquí hay un ejemplo rápido.

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

Ahora, en sus plantillas twig, simplemente puede hacer algo como lo siguiente:

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

y haga lo mismo con sus activos css. De esta manera, si desea agregar otra biblioteca a su colección backend.js o incluir algún grupo de funcionalidad js como special_backend, es una sola línea en su plantilla y cuando realiza cambios, solo tiene que lidiar con sus definiciones de configuración.

Espero que eso te ayude un poco. Estoy seguro de que hay otras formas de hacer esto también, pero este es mi método preferido.

Respondido el 02 de enero de 14 a las 22:01

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.