template - Con Assetic/Twig/Symfony2, ¿puedo definir librerías frontales?

symfony twig block

Question

Estoy usando Symfony2, con Assetic y Twig. Tengo varias bibliotecas de frontend: Backbone, jQuery, jQuery UI y Bootstrap. Tanto Bootstrap como jQuery UI incluyen archivos CSS y JS.

¿Existe alguna manera de poder definir los recursos que necesitan incluir (incluidas las dependencias) y, a continuación, en Twig / Assetic solo incluir todos esos recursos en una etiqueta? Lo que buscaría es algo así como:

// config.yml <!-- DOES NOT WORK -->
assetic:
  resources:
    jquery:
      js: /filepath/to/jquery.js
    jquery_ui:
      dependencies: jquery
      css: /filepath/to/jqueryui.css
      js: /filepath/to/jqueryui.js
    less:
      js: /filepath/to/less.js
    bootstrap:
      dependencies: { less, jquery }
      js: /filepath/to/bootstrap.js
      css: /filepath/to/bootstrap.css
    backbone:
      dependencies: { jquery }
      js: { /filepath/to/underscore.js, /filepath/to/backbone.js }

// view.html.twig
{% use jquery_ui %}
{% use bootstrap %} 

// outputs all js and css for jQuery, jQueryUI, Less, Backbone, and Bootstrap

Encontré un par de preguntas relacionadas:

• ¿Cómo se definen los recursos Assetic en el archivo de configuración symfony 2 yml o xml?
• Symfony2 Assetic + Twig Template JavaScript Herencia

pero ninguno parece implicar la definición de los recursos en config.yml. En cambio, los definen en base.html.twig pero eso es lo que trato de evitar.

Intenté usar la etiqueta de use en Twig, definiendo una plantilla llamada ''jquery_ui'' y usando {% stylesheets %} y {% javascripts %} en ese bloque y luego en base.html.twig poniendo {% use "jquery-ui.html" %} . Sin embargo, el use no importará la plantilla porque tiene un cuerpo.

Answer 1

Aunque existe un soporte para definir bibliotecas front-end, desafortunadamente no hay soporte para la resolución de dependencias. También debe definir su CSS y JavaScript por separado.

Lo que he estado haciendo es crear un archivo separado en /app/config/ llamado assets.yml e incluirlo en la configuración principal para mantener las cosas limpias.

assetic:
    assets:
        jquery:
            inputs:
                - ''%kernel.root_dir%/Resources/public/js/jquery.js''
                - ''%kernel.root_dir%/Resources/public/js/jquery-ui.js''
        my_lib:
            inputs:
                - ''%kernel.root_dir%/Resources/public/js/my-custom-lib.js''
                - ...

Tenga en cuenta que ''% kernel.root_dir%'' se resuelve en el directorio de la app de manera predeterminada en Symfony2. Ahora puede usar los activos en sus plantillas Twig.

{% block javascripts %}
    {% javascripts ''@jquery'' ''@my_lib'' output="js/jquery.js" %}
        <script type="text/javascript" src="{{ asset_url }}"></script>
    {% endjavascripts %}
{% endblock %}

Lo mismo podría hacerse con los archivos CSS. El ejemplo también demuestra por qué no es posible definir CSS y JavaScript como un único activo.

Answer 2

Es posible que desee verificar Cartero, que le permite definir "paquetes de activos", incluidas las dependencias, y luego incluir esos paquetes en su página.

https://github.com/rotundasoftware/cartero

Tendría que escribir un Symfony2 Hook, pero eso no sería demasiado difícil.

Answer 3

La solución más simple es colocarlos en los directorios apropiados en el directorio web / ya que esta es la raíz de su sitio que se sirve para todos sus paquetes de Symfony.