I'm using uglifyjs and uglifycss with symfony to manage my asset.
I have a strange issue.
Here is my configuration
# Assetic Configuration
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ ]
filters:
cssrewrite: ~
uglifyjs2:
# the path to the uglifyjs executable
bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
uglifycss:
bin: "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"
And in my view
{% javascripts
'#MyBundle/Resources/public/js/global.js'
'#MyBundle/Resources/public/utilis/*.js'
'#MyBundle/Resources/public/utilis/*/*.js'
'#MyBundle/Resources/public/js/*.js'
'#MyBundle/Resources/public/js/*/*.js'
filter='?uglifyjs2' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
With this I expect to have only one file minified included in my page.
On my development machine (Windows 7, php 5.4, symfony 2.7) everything is working fine.
But on production environment (debian 7, php5.4, symfony 2.7), all individual file is being included in the page.
<script src="/js/e434957_part_14_Store_1.js"></script>
<script src="/js/e434957_part_15_CrudPanel_2.js"></script>
<script src="/js/e434957_part_15_Form_3.js"></script>
<script src="/js/e434957_part_15_Grid_4.js"></script>
Can somebody help me understand what is going on?
When you dump the assets, make sure you add --env=prod to the assetic:dump command.
You can also force files combining with combine=true parameter. But it should be set on true automatically on production env.
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.
Current solutions to this question don't work...
I can't seem to get Symfony assetic to function. I have the following configured in my twig template
{% javascripts
"/js/foundation/foundation.abide.js"
"/js/foundation/foundation.reveal.js"
"/js/edged/jquery-ui.form.js"
"/js/edged/jquery-ui.table.js"
"/js/jquery.autocomplete.js"
"/js/jquery.typewatch.js"
output="/js/combined.js"
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
For same reason in development environment with use_controller = true I get the following error
An exception has been thrown during the rendering of a template
("Unable to generate a URL for the named route "_assetic_476d03f_0" as
such route does not exist.") in admin/view.html.twig at line 314.
When I set use_controller to false and do the whole assetic dump
app\console assetic:dump
The assets are not found, after digging around I noticed that the the _assetic route configurations have been removed from version 2.6 and 2.7, I think as of version 2.4 adding the configuration doesn't resolve any of the issues am facing.
Such a cool feature and I can;t get it working :(
Verify in your config.yml file under Assetic Configuration that you have the bundle registered.
assetic:
debug: "%kernel.debug%"
use_controller: false <-- this should be set to true in config_dev.yml
bundles:
- AppBundle <-- your bundle name
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.
It seems that i can't use uglifyjs filter with assetic on a Symfony2 context, as it seems to cause segmentation fault.
php app/console assetic:dump
Dumping all dev assets.
Debug mode is off.
16:35:02 [file+] ...../../web/css/compiled_50f84d1.css
16:35:02 [file+] ...../../web/js/compiled_e371e27.js
Segmentation fault: 11
My config looks like :
assetic:
debug: false
use_controller: false
read_from: %kernel.root_dir%/../web
write_to: %kernel.root_dir%/../web
bundles: [] # disable bundles parsing
node: /usr/local/bin/node
filters:
cssmin: ~
uglifyjs: ~
And my view :
{% javascripts 'js/all.js' 'js/player.js' filter='uglifyjs' output='js/compiled_*.js' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
As soon as i disable the filter I no longer have the error. I have a fresh install of node and I have uglify-js#1.3.3 node_modules/uglify-js
I don't know if this will help you, but this is how I've setup uglifyjs in my config_prod.yml to make it work in production only:
assetic:
filters:
uglifyjs:
bin: /usr/local/bin/uglifyjs
no_copyright: true
apply_to: ["\.coffee$", "\.js$"]
Thanks to apply_to you don't need to use filter='uglifyjs' in the {% javascripts ... %} tag.