How can I configure asset versioning via Assetic in Symfony 3.2?
In Symfony 2 this could have been achieved by configuring packages version in framework:templating, but this is no longer the case in 3.
I've tried to use the following configuration:
framework:
assets:
packages:
css:
version: '2'
version_format: '%%s?version=%%s'
While using this in the template:
{% stylesheets output="css/global.css" "#AppBundle/Resources/assets/scss/frontend.scss" filter="scss" filter="?uglifycss" package="css" %}
<link rel="stylesheet" href="{{ asset(asset_url) }}">
{% endstylesheets %}
Unfortunately, this does not append the version parameter to the asset url, despite what Symfony's official documentation on assets suggests.
Never used "sub packages", try without:
parameters:
app_version: 1.0.0
framework:
assets:
version: '%app_version%'
version_format: '%%1$s?%%2$s'
base_urls: ['%your_assets_urls%']
I've managed to solve this after some further research:
one needs to specify the package name when calling the asset() function, like so:
{% stylesheets output="css/global.css" "#AppBundle/Resources/assets/scss/frontend.scss" filter="scss" filter="?uglifycss" %}
<link rel="stylesheet" href="{{ asset(asset_url, 'css') }}">
{% endstylesheets %}
The package name "css' needs to be defined in config:
framework:
assets:
packages:
css:
version: '2'
version_format: '%%s?version=%%s'
Related
my question may seems really pointless or I may look like an idiot, but I'd like to use Zurb Foundation in Symfony2.
I saw a little number of topics about it, but never an real a clear explanation on how to integrate it properly in my project.
I saw an official bundle on packagist. I installed it so. But there is no documentation for using it with symfony2. For example, how to call my css and js files ? From the vendor folder directly ? How to use compass in my symfony project to use it ? Should I use bower directly ? (this seems to me less painfull) And if yes, if I have an already existing Symfony2 project, may I use bower in the root of my project ? in web folder ? anywhere else ?
I'm really lost and would be greatfull if someone could explain me or give me some resources to help me out.
Thanks
For my website I put all my JS/CSS files in vendor NameVendor
In my layout
{% javascripts
'http://code.jquery.com/jquery-2.1.0.min.js'
'#NameBundle/Resources/public/js/*' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
{% stylesheets
'#NameBundle/Resources/public/css/*'
filter='cssrewrite' output='css/*.css' %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
In script tag
$(document).ready(function(){
$(document).foundation();
});
In App/config/config.yml
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ NameBundle ]
filters:
cssrewrite: ~
I failed to use grunt to update my files so do it manually
https://github.com/florianbelhomme/FlobFoundationBundle
I think that's what you're looking for?
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 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.
I have a CSS sprite sheet I'm trying to use, but my CSS file cannot 'see' the image. I've followed the answer provided here to no avail. My bundle structure is:
src/
vendor/
project/
bundle/
Resources/
public/
css/
normalize.css
static.css
images/
sprites.jpg
I've already done:
$ app/console assets:install
Installing assets using the hard copy option
Installing assets for Symfony\Bundle\FrameworkBundle into web/bundles/framework
Installing assets for MajorProductions\SewingDiva\SiteBundle into web/bundles/majorproductionssewingdivasite
Installing assets for Sensio\Bundle\DistributionBundle into web/bundles/sensiodistribution
and:
$ app/console assetic:dump
Dumping all dev assets.
Debug mode is on.
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_normalize_1.css
22:19:13 [file+] /home/kevin/www/diva/app/../web/css/06758be_part_1_static_2.css
Not sure what else to do....
Solved it by changing the reference from:
{% block styles %}
{% stylesheets '#MajorProductionsSewingDivaSiteBundle/Resources/public/css/*' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
to:
{% block styles %}
{% stylesheets 'bundles/majorproductionssewingdivasite/css/*' filter='cssrewrite' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
{% endblock %}
Apparently the auto-magical reference in the first version is not the way to go, despite it being used in the official Symfony docs.
#KevinM1
Apparently the auto-magical reference in the first version is not the way to go, despite it > being used in the official Symfony docs.
It is here (in French, but equivalent doc for other languages certainly exists)
Well, from the documentation:
This is a key point: once you let Assetic handle your assets, the files are served from a different location. This can cause problems with CSS files that reference images by their relative path. However, this can be fixed by using the cssrewrite filter, which updates paths in CSS files to reflect their new location.
So you need to enable the cssrewrite filter:
# app/config/config.yml
assetic:
filters:
cssrewrite: ~
And use it in your stylesheets block:
{% stylesheets '#AcmeProjectBundle/Resources/css' filter='cssrewrite' %}
<link href="{{ asset_url }}">
{% endstylesheets %}