I have set up assets in my config.yml:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
On twig template JS files are loaded:
{% block javascripts %}
{% javascripts output="assets/js/app.js"
'#AppBundle/Resources/public/js/thirdparty/jquery-3.1.1.min.js'
'#AppBundle/Resources/public/js/thirdparty/bootstrap.min.js'
'#AppBundle/Resources/public/js/thirdparty/bootstrap-select.min.js'
'#AppBundle/Resources/public/js/forms.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
The issue is: In dev environment there are 4 separate requests to these files, but each one is combined with others (what should be done ONLY in prod environment):
Seems like some misconfiguration, but have no idea what exactly.
P.S. In prod environment eveything OK - there is only 1 request for combined file.
P.S.S. Symfony version is 2.8.12
Solved by reinstalling symfony/assetic-bundle.
Still have no idea what was wrong.
Related
I have this doubt about URLs of assetics who I generated.
On the view, this was what I did:
{% block stylesheets %}
{% stylesheets
'assets/vendor/bootstrap/dist/css/bootstrap.min.css'
'assets/vendor/font-awesome/css/font-awesome.min.css'
'assets/vendor/dist/css/*.css'
output = 'bundles/compiled/css/app.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
{% javascripts
'assets/vendor/jquery/dist/jquery.min.js'
'assets/vendor/bootstrap/dist/js/bootstrap.min.js'
'assets/vendor/dist/js/wow.min.js'
'assets/vendor/dist/js/slider.js'
'assets/vendor/dist/js/jquery.fancybox.js'
'assets/vendor/dist/js/owl.carousel.min.js'
'assets/vendor/dist/js/main.js'
'assets/vendor/dist/js/modernizr-2.6.2.min.js'
output = 'bundles/compiled/js/app.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
In dev environment, the app doesn't call these outputs links who assetic:dump generate, which is:
bundles/compiled/css/app.css
and
bundles/compiled/js/app.js/
both after /web folder.
In prod, I can't reach these locations. I get and 404 on
http://link.com/bundles/compiled/css/app.css for example.
So, how can I configure my config.yml for reach that path in prod environment?
This is what I have:
assetic:
debug: '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
cssrewrite: ~
**Edit:**I figured out the problem. My assetic's config was alright, the problem was in VirtualHosts file (modrewrite line, to be specific), which was only accepting ".php" extension files and web/ folder permissions.
That's the whole point of using AsseticBundle! When you are in prod mode, you need to dump the asset files. Have a look here.
php bin/console cache:clear --env=prod //clear the cache for prod environment
php bin/console assetic:dump --env=prod --no-debug
The result will be the concatenation of all your css stylesheets, in one single result file (bundles/compiled/css/app.css), and the concatenation of all your js scripts in one single result file (bundles/compiled/js/app.js), for the reason of reducing the requests to the server.
At this point, you won't be able to see, in the source of the page, all the css + js files, except those two from your compiled/ directory.
When you are in dev mode, the default behavior of AsseticBundle is to generate all your css + js files, for debugging purposes. That is, to help you debug your code easily. So at this point you will be able to see all you css+js files, but not the two files from compiled/ directory.
And pay attention, as cssrewrite must be a child of filters. See here the correction you need.
Im am using Symfony 2.5.3 with Assetic Bundle 2.5.0. Assetic keeps generating wrong urls to generated asset files.
My config_dev.yml looks like this:
assetic:
use_controller: false
write_to: %kernel.root_dir%/../web/dev/dev-env/
When I run php app/console assetic:dump --env=dev the files are correctly written to the above configured directory.
However, in the twig template, the output is like this:
<script src="/js/7cca762_part_4_timer_2-33c923b.js"></script>
<script src="/js/7cca762_part_4_uploader_3-6336104.js"></script>
when it should be
<script src="/dev/dev-env/js/7cca762_part_4_timer_2-33c923b.js"></script>
<script src="/dev/dev-env/js/7cca762_part_4_uploader_3-6336104.js"></script>
The twig template looks like this:
{% javascripts
'#AcmeProjectBundle/Resources/js/*' filter='?uglifyjs2'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
Any ideas?
Update:
I just found this Stackoverflow item describing the same problem - also without a clear solution so far.
try out asset base urls
framework:
templating:
assets_base_urls:
http: your.url.com/dev/dev-env
I have some troubles making UglifyCSS and UglifyJS works with Assetics on my Symfony2.6 app.
I simplified a little the problem for the moment (I properly checked that I still meet the issue with this config). I import my stylesheet in my base twig file like this:
{% stylesheets
'#main_css'
output='assets/app.min.css'
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
My assetic is configured with the UglifyCSS and with the filters cssrewrite and uglifycss. The filters are configured be applied to all .css files.
Here is my configuration:
# app/config/config.yml
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: ['MyFrontBundle']
node: /usr/local/bin/node
node_paths:
- "%kernel.root_dir%/../node_modules"
- "/usr/local/lib/node_modules"
filters:
cssrewrite:
apply_to: "\.css$"
uglifycss:
bin: %kernel.root_dir%/../node_modules/.bin/uglifycss
apply_to: "\.css$"
# uglifyjs2:
# bin: %kernel.root_dir%/../node_modules/.bin/uglifyjs
# apply_to: "\.js$"
assets:
main_css:
inputs:
- '#MyFrontBundle/Resources/public/css/app.min.css'
Here is the error:
$ php app/console assetic:dump
Dumping all dev assets.
Debug mode is on.
18:52:42 [file+] /path/to/app/../web/assetic/main_css.css
[Symfony\Component\Process\Exception\RuntimeException]
The process has been signaled with signal "6".
assetic:dump [--forks="..."] [--watch] [--force] [--period="..."] [write_to]
If I comment the uglifycss filter in my config, there is no longer any problem. Also, if I apply the filter directly into the stylesheet block, there is no problem too. So the problem comes from the apply_to declaration but I don't see why.
Oh yeah, I tried too by adding the filter manually the filter to the stylesheet block:
{% stylesheets
'#main_css'
filter="?uglifycss"
output='assets/app.min.css'
%}
<link rel="stylesheet" href="{{ asset_url }}"/>
{% endstylesheets %}
And then everything works fine. So in the ends it really comes down to using the apply_to to apply the filter.
I have exactly the same problem with uglifyjs. I checked beforehand all the paths: node, bin to uglify.
Thanks.
I have problem with assetic in symfony. Stylesheet part does not work at all in dev environment (css styles are not applied to the document) and in production environment everything is ok except resources are not linked correctly for fontawesome
I am using bower and my .bowerrc file:
{
"directory": "src/Acme/AdminBundle/Resources/public/3rdparty"
}
My config.app file:
assetic:
debug: "%kernel.debug%"
use_controller: true
bundles: ["AcmeAdminBundle"]
filters:
cssrewrite: ~
yui_css:
jar: "%kernel.root_dir%/../bin/yuicompressor.jar"
yui_js:
jar: "%kernel.root_dir%/../bin/yuicompressor.jar"
and finally the layout.html.twig
{% stylesheets filter='cssrewrite,yui_css' output='css/3rdparty.css'
'#AcmeAdminBundle/Resources/public/3rdparty/bootstrap/dist/css/bootstrap.css'
'#AcmeAdminBundle/Resources/public/3rdparty/fontawesome/css/font-awesome.css'
%}
<link rel="stylesheet" href="{{ asset_url }}">
{% endstylesheets %}
output
This is a known issue that causes the cssrewrite filter to fail when using the #AcmeFooBundle syntax for CSS Stylesheetsdocument.
In other words, you can't use #AcmeFooBundle and cssrewrite filter together.
I would like to use CDN together with Assetic in my Symfony2 project. I am using the javascripts helper to combine several Javascript files:
{% javascripts
'#MyBundle/Resources/public/js/file-1.js'
'#MyBundle/Resources/public/js/file-2.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
and in my config.yml file I have registered a CDN to be used in the assets:
framework:
templating:
assets_base_urls:
http: [http://my.cdn.url]
ssl: [https://my.cdn.url]
When dumping, I do get a combined file, but its url is a relative one, not one pointing to the CDN. For instance:
<script src="/js/c713f83.js"></script>
And the same happens when combining several CSS files. The only way I managed to get URLs using the CDN is through asset:
<img src="{{ asset('bundles/mybundle/images/logo.png') }} ">
Is there anything preventing Assetic from using the CDN hosts I have specified in my configuration?
You have to pass the Assetic's generated asset_url to the asset() Twig's function :
{% javascripts
'#MyBundle/Resources/public/js/file-1.js'
'#MyBundle/Resources/public/js/file-2.js' %}
<script src="{{ asset(asset_url) }}"></script>
{% endjavascripts %}
Be aware that in dev environment you will get URLs that look like http://my.cdn.url/app_dev.php/js/file-1.js. In order to prevent that you have to configure your dev environment so it doesn't use CDN :
# app/config/config_dev.yml
framework:
templating:
assets_base_urls:
http: []
ssl: []
Remember dumping your assets with assetic:dump and, overall, remember that Assetic and the Symfony2 asset Twig function are two different things.