I'm trying to set my Symfony 2 project to combine and compress a number of javascript files. Below is an example of the tag I'm using to accomplish this:
{% javascripts 'bundles/acmedemo/js/*' output='js/plugins.js' filter='closure' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
I've config to map to the yui compressor jar.
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
closure:
jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar
yui_css:
jar: %kernel.root_dir%/java/yuicompressor-2.4.6.jar
When I try to bring up the page in the browser it takes a while to load and doesn't include the output file. I tried to run the app/console assetic:dump command and got this error:
[RuntimeException]
If no input file is specified, it defaults to stdin. In this case, the 'type' option is required. Otherwise, the 'type' option is required only if the input. And the windows prompt cuts it off.
Has anyone else encountered this issue?
Is you yuicompressor file actually located in %kernel.root_dir%/java/yuicompressor-2.4.6.jar ? not %kernel.root_dir%/Resources/java/yuicompressor-2.4.6.jar ?
Check this link, maybe something will help http://groups.google.com/group/symfony2/browse_thread/thread/dde8b418813bab37/1d4e42a7396f2e0f?lnk=gst&q=yui
Additionaly: the path has to be put in: ""
The config will look like this:
assetic:
debug: %kernel.debug%
use_controller: false
filters:
cssrewrite: ~
closure:
jar: "%kernel.root_dir%/java/yuicompressor-2.4.6.jar"
yui_css:
jar: "%kernel.root_dir%/java/yuicompressor-2.4.6.jar"
The following isn't an error as such but you seem to be configuring the YUI compressor from Yahoo as 'closure'. Google Closure is a different JS compression tool.
Related
I'm trying to clean the way I manage my assets in one of my symfony 2 application, and I enhance weird issues.
I try to use "Named assets" as described here : Symfony Cookbook.
I find more simple to change a config file when you change your assets, than going into the template files.
So there is my yaml config for assetic :
assetic:
debug: "%kernel.debug%"
use_controller: "%kernel.debug%"
filters:
cssrewrite:
apply_to: '\.css$|\.less$'
lessphp:
file: '%kernel.root_dir%/../vendor/oyejorge/less.php/lessc.inc.php'
apply_to: '\.less$'
cssmin:
file: '%kernel.root_dir%/../vendor/natxet/CssMin/src/CssMin.php'
apply_to: '\.css$|\.less$'
jsmin:
file: '%kernel.root_dir%/../vendor/werkint/jsmin/JsMin/Minify.php'
apply_to: '\.js$|\.twigjs$'
# ...
font_awesome_css:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/less/font-awesome.less'
output: 'dist/css/font-awesome.min.css'
And in my template, I refer to FontAwesome (I use FontAwesome as an example, problem occurs on my others css & javascript compiled from the yaml file) :
{% stylesheets '#font_awesome_css' %}
<link rel="stylesheet" media="screen" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
When I run php app/console assetic:dump --env=prod, the file web/dist/css/font-awesome.min.css is correctly compiled and created, but I also have web/css/f3c79b8.css which was created.
And this is the second file which is used and seemingly the filters have not been applied on it.
If I add the filters explicitly in the yaml file :
font_awesome_css:
inputs: '%kernel.root_dir%/../vendor/fortawesome/font-awesome/less/font-awesome.less'
output: 'dist/css/font-awesome.min.css'
filters:
- lessphp
- cssmin
- cssrewrite
It seems to produce a correct file (less has been compiled) but, as my font belongs to the dist folder, the css failed to load it.
So , How can I make my template to use the correct generated file dist/css/font-awesome.min.css and avoid the creation of files into web/css and web/js ?
I think there is something I have misunderstood about this feature.
Thanks for help.
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
I Installed Ruby in C:\Ruby200-x64, PATH was set to C:\Ruby200-x64\bin and ran:
gem update --system
gem install sass
gem install compass
Then I configured Assetic in app/config/config.yml:
ruby: C:\Ruby200-x64\bin\ruby.exe
sass: C:\Ruby200-x64\bin\sass.bat
filters:
compass:
bin: C:\Ruby200-x64\bin\compass.bat
In app/Resources/views/base.html.twig I've added the stylesheets block:
{% stylesheets
'css/main.scss' filter="compass" %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
The scss file points to /web/css/main.scss for testing in prod I would use the bundles/bundlename/... paths.
Then, when I tried to install and dump Assets:
php app/console assets:install
php app/console assetic:dump
I got this error while ending paths with .bat:
[Assetic\Exception\FilterException]
An error occurred while running:
"C:\Ruby200-x64\bin\ruby.EXE" "C:\Ruby200-x64\bin\compass.bat" "compile" "C:\Users\Jes·s\AppData\Local\Temp" "--config" "C:\Users\Jes·s\AppData\Local\Temp\assC7D6.tmp" "--sass-dir" "" "--css-dir" "" "C:/Users/Jes·s/AppData/Local/Temp/assC7D7.tmp.scss"
Error Output:
C:/Ruby200-x64/bin/compass.bat:1: syntax error, unexpected tCONSTANT, expecting end-of-input
And this when not using .bat extensions:
[Assetic\Exception\FilterException]
An error occurred while running:
"C:\Ruby200-x64\bin\ruby.exe" "C:\Ruby200-x64\bin\compass" "compile" "C:\Users\Jes·s\AppData\Local\Temp" "--config" "C:\Users\Jes·s\AppData\Local\Temp\ass52DB.tmp" "--sass-dir" "" "--css-dir" "" "C:/Users/Jes·s/AppData/Local/Temp/ass52DC.tmp.scss"
Error Output:
Configuration file, C:\Users\Jes·s\AppData\Local\Temp\ass52DB.tmp, not found or not readable.
I saw these (and others):
How to use SCSS filter in Symfony2 under Windows?
https://github.com/kriswallsmith/assetic/issues/299
https://github.com/symfony/AsseticBundle/issues/158 tried lot of things and I'm stuck...
The version without .bat is correct, however looks like "Jes·s" folder name causes the issue (there should be u with an accent?).
Your config.yml should look something like this
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ AJWPageBundle ]
# compass.bin: W:\Ruby\1.9.2\bin\compass.bat
java: /usr/bin/java
ruby: 'W:\Ruby\bin\ruby.exe'
sass: 'W:\Ruby\bin\sass.bat'
filters:
cssrewrite: ~
sass:
bin: %sass.bin%
apply_to: "\.scss$"
compass:
bin: %compass.bin%
closure:
jar: "%kernel.root_dir%/Resources/java/compiler.jar"
yui_css:
jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"
parameters:
assetic.ruby.bin: 'W:\Ruby\bin\ruby'
compass.bin: 'W:\Ruby\bin\compass'
sass.bin: 'W:\Ruby\bin\sass'
Make sure you modify the paths to match with your file system.
Note that some have a .exe or .bat at the end some do not
Next in console execute "php app/console assets:install"
This should create directories within web/bundles that match up with your src/bundles directories.
From in there you should find the path to the scss file you will be calling in my example below it would be: bundles/mybundle/css/bootstrap.scss
In your view:
{% stylesheets
'bundles/mybundle/css/bootstrap.scss' output='css/*.css' filter="compass" %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
And then finally in console execute "php app/console assetic:dump"
This should be all that you have to do at this particular point in time 2/1/2014 - I did not need to modify any of the batch files for ruby
You will find that assetic will find the file web/bundles/mybundle/css/bootstrap.css and any other css file you may add, combine them and then save them to web/css/nameoffile_123456.css with some number appended to the end to make sure that if there is an update the browser is forced to download the new version.
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.
I'd like to globally configure the output dir of where assetic dumps my JS files. Currently, they always go to web/js/*. I want to change this to web/js/compiled/*.
It's possible to specify this at a per-file level: http://symfony.com/doc/2.0/cookbook/assetic/asset_management.html#dumping-asset-files
Can't seem to find a way to set this globally across my Symfony app. Any config parameter I'm missing?
UPDATE
Found an assetic config parameter called write_to. Setting this in config.yml causes the command line assetic:dump to dump files to the new dir, but within twig files the asset_url var still points to the original path.
You should use the property write_to.
in my configuration for exemple I use
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: %kernel.debug%
read_from: %kernel.root_dir%/Resources/views/
write_to: %kernel.root_dir%/../web/static/
Your ouput string start where ends write_to
for exemple
{% javascripts filter="closure" output='js/main.js'
...
{% stylesheets filter='compass,?cssrewrite'
'default/static/sass/screen.scss'
output='css/screen.css'
%}
both will placed respectively in /web/static/js/main.js
and /web/static/css/screen.css
assets_base_urls is used to specify base URL's to be used for assets referenced from http and ssl (https) pages.
!! assets_base_urls is also used by {% images %} as the root before output value, but {% images %} doesn't consider write_to when rendering html (only when dumping) so better not using write_to and rely only on output value. More about it in my other post on stackoverflow and in this post on AsseticBundle's github.
You can set the asset path ( assets_base_urls ) for twig to a static path, instead of using the relative path. In your config.yml file, it would look similar to this:
framework:
templating:
engines: ['twig']
assets_base_urls:
http: [http://path.to-cdn.com]
This will effect asset_url from assetic as well as twig's asset() method. The latter may or may not be desired.
This GitHub issue comment helped me with this issue.
While in dev, your assets will still go thru the controller but in production, the URLs will be as you desire.
Example config.yml:
assetic:
write-to: %kernel.root_dir%/../web/assets
...
framework:
...
templating:
engines: ['twig']
packages:
assetic:
base_urls: '/assets'
Example in your template:
{% block javascripts %}
{% javascripts '#jquery' '#bootstrap_js' '#backbone' '#handlebars' combine=true package='assetic' %}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
{% endblock %}
Notice that you have to add the package='assetic' attribute in the java scripts tag. This is a good compromise IMO because it won't break assets from other bundles as kmfk's solution will.
Just a quick note on this. If you're using assets_base_urls, to specify a relative base URL, this only works prior to Symfony 2.7, due to the introduction of the new assets component in that version. Further information on how to change this is available at http://symfony.com/blog/new-in-symfony-2-7-the-new-asset-component , but the long and short of it is that:
framework:
templating:
assets_base_urls:
http: ['/some-relative-url']
ssl: ['/some-relative-url']
becomes:
framework:
assets:
base_path: /some-relative-url
Try this commande $ app/console --env=prod assetic:dump web/
you have juste to change the url you want raher than 'web/'