With Assetic / Twig / Symfony2, can I define front end libraries?

I'm using Symfony2, with Assetic and Twig. I have various frontend libraries - Backbone, jQuery, jQuery UI, and Bootstrap. Both Bootstrap and jQuery UI include CSS and JS files.

Is there a way that I can define the resources they need to include (including dependencies), and then in Twig / Assetic just include all those resources in one tag? What I'd look to have is something like:

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

I found a couple of related questions:

but neither seems to involve defining the resources in config.yml. Instead, they define them in base.html.twig but that's what I'm trying to avoid.

I tried using the use tag in Twig, by defining a template called 'jquery_ui' and using {% stylesheets %} and {% javascripts %} in that block and then in base.html.twig putting {% use "jquery-ui.html" %}. However, use won't import the template because it has a body.

Although there is indeed support for defining front-end libraries, there is unfortunately no support for dependency resolving. You must also define your CSS and JavaScript separately.

What I have been doing, is creating a separate file in /app/config/ called assets.yml and including it in the main configuration to keep things clean.

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'
                - ...

Note that ´%kernel.root_dir%´ resolves to the app directory by default in Symfony2. You may now use the assets in your Twig templates.

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

The same could be done for CSS files. The example also demonstrates why it's not possible to define CSS and JavaScript as a single asset.

The simplest solution is to put them in appropriate directories in the web/ directory as this is the root of your site that is served for all your Symfony bundles.

You might want to check out Cartero, which allows you to define "asset bundles", including dependencies, and then include those bundles in your page.

https://github.com/rotundasoftware/cartero

You would need to write a Symfony2 Hook, but that wouldn't be too difficult.

来源：https://stackoverflow.com/questions/10830129/with-assetic-twig-symfony2-can-i-define-front-end-libraries

标签

symfony

twig

assetic