All geek questions in one place

With Assetic / Twig / Symfony2, can I define foreground libraries?

I use Symfony2, with Assetic and Twig. I have various interface libraries - Backbone, jQuery, jQuery UI and Bootstrap. Both Bootstrap and jQuery UI include CSS and JS files.

Is there a way to define the resources that they should include (including dependencies), and then in Twig / Assetic just include all these resources in one tag? What I would like 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 does not seem to be related to the definition of resources in config.yml. Instead, they define them in base.html.twig , but this is what I am trying to avoid.

I tried using the use tag in Twig by defining a template named "jquery_ui" and using {% stylesheets %} and {% javascripts %} in this block and then putting {% use "jquery-ui.html" %} . However, use will not import the template because it has a body.

+4
source share
3 answers

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

What I'm doing is creating a separate file in /app/config/ called assets.yml and including it in the main configuration so that everything is in order.

 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%' allows the default app directory in Symfony2. You can now use 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 can be done for CSS files. This example also shows why it is not possible to define CSS and JavaScript as a single asset.

+16
source

The easiest solution is to place them in the appropriate directories in the web / directory, as this is the root of your site, which is designed for all your Symfony packages.

+1
source

You might want to check out Cartero, which allows you to define “asset packages”, including dependencies, and then include those packages on your page.

https://github.com/rotundasoftware/cartero

You need to write a Symfony2 Hook, but that would not be too difficult.

0
source

Source: https://habr.com/ru/post/894166/

More articles:


All Articles