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.
Related
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.
When I try and dump my assetic managed content for a Symphony2 app, I get the following error:
$ php app/console assetic:dump -e prod
Dumping all prod assets.
Debug mode is off.
[InvalidArgumentException]
There is no "less" filter.
However, as far as I can tell I don't use any assets that require the less filter, certainly a grep of all my twig templates doesn't turn anything up.
One of the dependencies I've installed via composer (Twitter's bootstrap) has some .less templates, but I don't reference them in my twig templates, I just point it at the css version. Will assetic still try and dump them? How can I tell it not to?
For reference this is how I include the css in my template
{% stylesheets filter="cssrewrite"
'../vendor/jquery-ui-css/jquery-ui-css/*css'
'../vendor/twitter/bootstrap/docs/assets/css/bootstrap*.css'
%}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
hm many possible causes ...
1) some third-party bundle adds an assetic collection dependeing on the less filter in a compiler pass
2) there is an apply-to rule like
assetic:
filters:
less:
apply_to: *.less
... in your assetic configuration i.e. app/config/config.yml
3) there is an asset collection using less filter in your configuration
assetic:
assets:
css_character:
inputs:
- "%kernel.root_dir%/../src/Acme/YourBundle/Resources/public/less/*.less"
outputs:
- css/my.css
filters:
- less
4) one of your third-party bundles provides a twig template using assetic's {% stylesheets %} function with the less filter:
{% stylesheets "#AcmeTwitterBundle/Resources/bootstrap/less/*.less" filter="less" %}
{# ... {{ asset_url }} ...#}
{% endstylesheets %}
Now how to find out?
At first check your config files app/config/config.yml and other included ones for assetic entries using the less filter.
The easiest way to find out where the less filter is being used is installing ElaoWebProfilerExtraBundle, clearing your cache and having a look at the "Assetic" tab in the left-side menu of the profiler. You will get an overview of all assetic collections and the filters they use.
Another option - not involving a new bundle although WebProfilerExtraBundle is awesome - is to disable your third-party bundles one by one ( and clear the cache each time ) in app/AppKernel.php try if assetic:dump still throws the exception until you find the bad-boy.
Or dirty: enable the filter though less is probably not installed and see where the next exception is thrown:
assetic:
filters:
less: ~
... all in all i would bet you included the supercool mopa-bootstrap bundle of which almost nobody knows what it's actually doing behind the scenes but it's famous and many people install it because of it's KnpBundle's score.
meaning ... your exception would then be thrown because of the less files included in the templates provided by MopaBootstrapBundle i.e. here.
I have in my bundle in Resources a directory called vendor which contains JavaScript libraries, etc. Some of those vendors contain images.
I can import css/less/js files using assets with:
assetic:
assets:
flot:
inputs:
- #MyBundle/Resources/vendor/flot/jquery.flot.js
- #MyBundle/Resources/vendor/flot/jquery.flot.time.js
filters:
- ?yui_js
However if vendor contains images, I have no idea, how to put them into web/ directory.
I'd rather not symlink them manually.
Assetic's asset collections like
assetic:
assets:
collection_name:
inputs:
- ...
output:
- desired_filename # relative to assetic.output_path
filters:
- ?lessphp # scss, optipng, jpegoptim ... whatever
# the ? (question mark) prevents the
# filter to be applied in dev mode
can also contain images. but you have to specify them one by one
assetic:
assets:
[...]
my_image:
inputs:
- /path/to/image/image.png
output:
- images/smushed_image.png
filters:
- optipng
my__second_image:
inputs:
- /path/to/image/image2.jpg
output:
- images/smushed_image2.jpg
filters:
- jpegoptim
Then use the assetic:dump command to have them written ( and compiled / smushed ) to your web folder.
The --no-debug option prevents assetic from creating debug files for every single file in every package. Use for production systems or if you have another way of debugging ( i.e. the awesome Source Maps )
app/console assetic:dump --no-debug
Use the packages like this:
{% stylesheets '#collection_name' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
{% endstylesheets %}
or
{% image '#my_image' %}
<img src="{{ asset_url }}" alt="Example"/>
{% endimage %}
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.
I'm trying to use assetic in symfony2 to manage my css.
The links are generated fine. However, no files are generated.
Here's my configuration:
Layout.html.twig
{% stylesheets
'#FooBundle/Resources/public/css/main.css'
filter='cssrewrite'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
Config.yml
assetic:
debug: %kernel.debug%
use_controller: false
bundles: [ FooBundle ]
filters:
cssrewrite: ~
Config_dev.yml
assetic:
use_controller: true
Assetic generates te link foo.foo/app_dev.php/css/957d3aa_main_1.css. However, the file isn't there (or anywhere else). I've tried playing around with permissions and looking in the (nginx) logs, but nothing so far.
All help would be greatly appreciated.
You have 2 options when dealing with assets. The reason you do not see your assets physically in your computer is because you chose Option 1.
Option 1: SYMFONY CAN PROCESS THE FILES DYNAMICALLY FOR YOU
That means that each asset path generated in the dev environment is handled dynamically by Symfony. Therefore, Assetic generates paths to CSS and JavaScript files that don't physically exist on your computer. This is an internal Symfony controller that opens the files and serves back the content for you.
Advantages:
- Changes made on your assets take immediate effect
- This is great in dev mode as Symfony generates the files dynamically for you
Disadvantages:
- This is not possible in prod mode as rendering each asset dynamically would be too slow
- The assets won't be directly accessible on your computer (which is why you cannot find the file)
- Can be quite slow if you are using a lot of filters, etc...
To do this in dev mode, just edit assetic config in config_dev.yml:
assetic:
use_controller: true
Option 2: DUMPING ASSET FILES
If you don't want to handle the assets dynamically, you can dump your assets manually, meaning actually writing your assets phisically on your computer.
Advantages:
- No need for Symfony to generate the files dynamically so this will run a lot faster
- Therefore, this is perfect in prod mode
- The files are physically accessible in the web/ directory (or wherever you chose to output them)
Disadvantages:
- You either need to dump the assets each time you change something..or you can dump the assets with the --watch command, which can potentially be a bit annoying if you are working in dev mode.
To do this:
Set use_controller to false (config_dev.yml):
assetic:
debug: %kernel.debug%
use_controller: false
You can even choose where to read and output your assets if necessary
assetic:
read_from: %kernel.root_dir%/Resources/views/
write_to: %kernel.root_dir%/../web/thefolderyouwant/
The ouput now starts from your write_to config in assetic
{% stylesheets
'#FooBundle/Resources/public/css/main.css'
output='css/main.css'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
You will have a resource error if you continue, so comment out or delete these assetic route in config_dev.yml:
_assetic:
resource: .
type: assetic
Finally, you can generate the assets automatically, so that the changes that you make take immediate effect:
php app/console assetic:dump --watch
In that case, the file should now be available:
/web/thefolderyouwant/css/main.css
See the Cookbook for more info: How to use Assetic for Asset Management?
I had the same problem, I just needed to install java
sudo apt-get install default-jre
you can also look on the begining of output, this might help:
app/console assetic:dump > outfile 2>&1
It also doesn't generate files when use_controller: true is on if you're using SASS to compile SCSS but ruby or the ruby gem sass not installed.
I had an error very similar to this one. Suddenly assetic stopped working. The only thing I added was the FOSRestBundle. Maybe you are using the rest bundle too.
Here is my solution:
fos_rest:
routing_loader:
default_format: json
param_fetcher_listener: true
body_listener: true
format_listener:
rules:
# render "/api" requests as json
- { path: ^/api, priorities: [ json ], fallback_format: json, prefer_extension: true }
# default, fallback rendering twig templates
- { path: ^/, priorities: ['html', 'application/javascript', 'text/css', '*/*'], fallback_format: html, prefer_extension: true }
I changed priorities: ['html', '*/*'] to priorities: ['html', 'application/javascript', 'text/css', '*/*'] and everything works fine now.
I have finally found solution !! I worked on this issue for hours! You wrote:
'#FooBundle/Resources/public/css/main.css' filter='cssrewrite'
BUT 'cssrewrite' filter doesn't accept #FooBundle syntax! You have to do:
php app/console assets:install
Symfony will create:
web/bundles/yourbundle/css/main.css
Now, in your twig template, replace:
'#FooBundle/Resources/public/css/main.css' filter='cssrewrite'
with:
'bundles/yourbundle/css/main.css' filter='cssrewrite'
Hope it's going to help someone else! (it's written in Symfony docs.. ^^)