Assetic management is the hardest part to understand IMHO, even after playing a year or more with Symfony. Anyways, I was experimenting with named assets:
assets:
mybundle_front_js:
inputs:
- #MeMyBundle/Resources/public/jquery/dist/jquery.js
- #MeMyBundle/Resources/public/bootstrap/js/affix.js
- #MeMyBundle/Resources/public/bootstrap/js/alert.js
- #MeMyBundle/Resources/public/bootstrap/js/button.js
- #MeMyBundle/Resources/public/bootstrap/js/carousel.js
- #MeMyBundle/Resources/public/bootstrap/js/collapse.js
- #MeMyBundle/Resources/public/bootstrap/js/dropdown.js
- #MeMyBundle/Resources/public/bootstrap/js/modal.js
- #MeMyBundle/Resources/public/bootstrap/js/tooltip.js
- #MeMyBundle/Resources/public/bootstrap/js/popover.js
- #MeMyBundle/Resources/public/bootstrap/js/scrollspy.js
- #MeMyBundle/Resources/public/bootstrap/js/tab.js
- #MeMyBundle/Resources/public/bootstrap/js/transition.js
filters: [?uglifyjs2]
Using the named asset:
{% block javascripts %}
{% javascripts
"#mybundle_front_js" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Dumping them:
php app/console cache:clear --env=prod
php app/console assetic:dump --env=prod
Result is two files, same size same content:
%kernel.root_dir%/../web/assetic/mybundle_front_js.js
%kernel.root_dir%/../web/js/055a364.js
Is there any reason to produce two identical files in prod environment?
The first file assetic/mybundle_front_js.js is the resulting file from configuring the named asset. The second file is the resulting file used from the assetic block inside your template.
If you would use two assets in your assetic block:
{% block javascripts %}
{% javascripts
"#mybundle_front_js"
"#whateveer" %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
you would end up with two named assets files in the assetic/ folder, and one file in the js/ folder containing the contents of the both files.
Guessing why there are also the files in the assetic/ folder: You can configure named assets and reference to them cleanly without using the {% javascripts %} block.
Related
Is this possible to use assetic with inheritance ? With the code below I get this error :
An exception has been thrown during the rendering of a template ("Unable to generate a URL for the named route "_assetic_41351d9" as such route does not exist.
My app layout :
{# app/Resources/views/layout.html.twig
{% block javascripts %}
{% javascripts
'assets/js/jquery-2.2.0.min.js'
'assets/js/main.js'
output='assets/compiled/app.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
My child layout :
{% extends "::layout.html.twig" %}
...
{% block javascripts %}
{{ parent() }}
{% javascripts
'assets/js/jquery.owl.min.js'
output='assets/compiled/page.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Yes you can use inheritance with Twig, and there is nothing inherently wrong with what you are trying to do in your code. I would try completely clearing your cache and loading the page again, and make sure all of the assets you are trying to load properly exist.
I believe it's not working the way we wanted it, but I discovered named assets
You name all your parent template assets in the config file
assetic:
assets:
jquery_and_ui:
inputs:
- '#AppBundle/Resources/public/js/thirdparty/jquery.js'
- '#AppBundle/Resources/public/js/thirdparty/jquery.ui.js'
And then you include the jquery_and_ui name in all children, along with any other assets:
{% javascripts
'#jquery_and_ui'
'#AppBundle/Resources/public/js/*' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
It's obviously a hassle to do but I can't find the easy way to do this and don't understand why it doesn't generate parent template assets.
EDIT
Are you by any chance using LiipThemeBundle? This could solve the problem:
# app/config/config.yml
liip_theme:
# ...
assetic_integration: true
That should work fine. Extending block javascripts is ok for assets as well.
Actually such a message
Unable to generate a URL for the named route "_assetic_41351d9" as
such route does not exist
says about outdated cache. Did you clear it? That helped me.
php app/console cache:clear --env=dev
Hope it makes sense.
In my case it appeared that error was caused by fact that the base file extension was .html.twig, while child file had only .twig - changing extensions of both files to .html.twig solved the problem...
I have some troubles loadings my css sheets with Symfony.
I'm using this in app\Resources\views\base.html.twig to load ccs files in web\bundles\app\css :
{% block stylesheets %}
{% stylesheets 'bundles/app/css/*' filter='cssrewrite' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Doing this throw an exception : "Unable to generate a URL for the named route "_assetic_2c8c367_0" as such route does not exist.") in base.html.twig at line 10
This works, css load and no exception thrown :
{% block stylesheets %}
<link rel="stylesheet" href="bundles/app/css/bootstrap.css">
{% endblock %}
Can someone help me understand why the first code dosn't works ? I haven't used Symfony since 6 month but I'm sure that's how I used to load css.
Here is the doc about it.
Try to empty your web/bundles folder first then run php app/console assets:install web/ --symlink and continued by php app/console assetic:dump
If the errors still occurs, try to recheck every css files included
As title says, I am using Symfony2.5 and assetic.
Is there a way to exclude comments from being inserted when dumping javascritp files?
For example, in my twig I have something like this:
{% block javascripts %}
{% javascripts
'#MyBundle/Resources/public/js/javascriptfile.js'
%}
<script src="{{ asset_url }}" type="text/javascript"></script>
{% endjavascripts %}
{% endblock %}
javascriptfile.js contains some commented code (some trial code, comments for readability...) that I would like not to be inserted in the version sent to the final user (first of all, smaller size of pages).
However, everything is copied when doing
php app/console assetic:dump --env=prod --no-debug
or
php app/console assetic:dump --env=dev
Is rewriting without comments possible in some way?
Even excluding console.logs would be appreciated...
Thank you in advance
In one of my Symfony projects I am using assetic for asset managment.
All my twig files extend a base file called base.html.twig. I This file (base) I have:
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'../vendor/bootstrap/css/bootstrap.css'
'css/general.css'
'css/navigation.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
In the other files that extend the base file I override the stylesheets block so that I can add other css files. This is what I do:
{% block stylesheets %}
{{ parent() }}
{% stylesheets output="css/compiled/main.css" filter='cssrewrite'
'bundles/account/css/signup.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Now the problem is that signup.css is never added in main.css and so are all the other files that are not in the stylesheet block in the base file.
I don't know why but this started happening when I swtiched to prod environment (it was working fine in dev). I've done, as recommending on Symfony's website:
php app/console assetic:dump --env=prod --no-debug
One other thing, it seems that I can't swtich back to dev mode even when I'm using app_dev.php
Do you guys have any idea of where these errors could come from ?
Thank you in advance for you help,
kimimsc
Your have a conflict with your 'option' attribute. So in prod environnement, the second stylesheet overwrite the first.
You must use another output value for signup.css (or don't use this option)
I am writing a Bundle to theme a site we are developing. The other Bundles call on a Core bundle for templating via Twig, and this Themeing bundle warps that core bundle.
I have done this by implementing the getParent() method inside the theme bundle class to return the name of the core bundle, thus causing Symfony2 to look in the theme bundle (for basically ANY file) before looking in the Core bundle.
Now, this works great in Dev mode, however, when I try in Production Mode, and my CSS/JS files are combined into one, the resulting path resolves to a 404 page, and all styling is lost.
I have cleared both dev and production cache, as well as rm -rf'd the dev and prod directories. Calling php app/console assetic:dump --env=prod --no-debug returns:
$ php app/console assetic:dump --env=prod --no-debug
Dumping all prod assets.
Debug mode is off.
10:25:40 [file+] /webapps/xxxbundle/app/../web/css/f996955.css
10:25:46 [file+] /webapps/xxxbundle/app/../web/js/f307b3f.js
10:26:05 [file+] /webapps/xxxbundle/app/../web/css/55d26a0.css
10:26:05 [file+] /webapps/xxxbundle/app/../web/js/ccfc30e.js
[RuntimeException]
The source file "/webapps/xxxclient/app/../web/bundles/xxxbundle/js/modernizer.custom.96376.js"
does not exist.
assetic:dump [--watch] [--force] [--period="..."] [write_to]
The web facing css and js dirs show:
$ ls web/css
55d26a0.css f996955.css
$ ls web/js
f307b3f.js
The missing JS file is likely due to another bundle that isn't being used. The main issue is, the template is looking for:
<link rel="stylesheet" type="text/css" media="screen" href="/css/2a6fc23.css">
<script src="/js/adf6a7a.js"></script>
Neither of which exist. Any ideas or directions?
[[ EDIT ]]
On further review, even the assetic production cache references these files, and yet they are never created... why? ....
[[ TEMPLATES ]]
(Overwritten Template)
{% extends 'FrontBundle:Frame:base.html.twig' %}
{% block title %}{{ page.title }}{% endblock %}
{% block wrapper %}
{# route: {{ route }} #}
{{ rendered | raw }}
{% endblock %}
(Overwriting Template)
{% extends 'SkinBundle::layout.html.twig' %}
{# Site Name #}
{% block site_name %}
{{ page.title }} | {{ parent() }}
{% endblock %}
Layout extends a base template which is just a shell of a site, in the process overwritting lets say CSS like:
{% extends 'FrontBundle:Frame:default.html.twig' %}
{# Stylesheets #}
{% block stylesheets %}
{# no execute {{ parent() }}#}
{% stylesheets
filter='cssrewrite'
'bundles/core/css/normalize.css'
'bundles/skin/css/main.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}
{% endblock %}
Which is declared in the Base template as:
{# Stylesheets #}
{% block stylesheets %}
{% stylesheets
filter='cssrewrite'
'bundles/core/css/normalize.css'
'bundles/front/css/global.css'
'bundles/page/css/page.css'
%}
<link rel="stylesheet" type="text/css" media="screen" href="{{ asset_url }}">
{% endstylesheets %}
<!-- Page -->
{% endblock %}
These style-sheets are not needed, which is why I have parent() wrapped in comment tags. Removing the line entirely doesn't help.
Removing parent() did help, after a thorough clearing of the cache and rebuild.
I will be making a bug ticket here soon, as for some reason having parent() inside of a comment ({# ... #}) was breaking the generation, even though nothing inside of {# ... #} should be parsed, or indeed even considered, by the template compiler.
Tricky bug.