Good installed foundation 5 just downloading and copying files
Now to move on veriaveis the need fondation have a .scss file however does not have anything on my Symfony2 project to use them
config.yml
filters:
cssrewrite: ~
compass: ~
sass: ~
base.html.twig
{% stylesheets "bundles/delivveweb/scss/*" filter="compass" %}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
he is generating the css file however when you open the file contains the following error:
[exception] 500 | Internal Server Error | Assetic\Exception\FilterException
[message] An error occurred while running:
'/usr/bin/ruby' '/usr/bin/compass' 'compile' '/tmp' '--boring' '--config' '/tmp/assetic_compassl2wvYW' '--sass-dir' '' '--css-dir' '' '/tmp/assetic_compassH8m6D9.scss'
Error Output:
/usr/bin/ruby: No such file or directory -- /usr/bin/compass (LoadError)
I hope someone can help me install it, if it were possible using composer
Type in console:$whereis compass or which compass
Example output: - compass: /usr/local/bin/compass
Now in config.yml:
filters:
compass:
bin: /usr/local/bin/compass
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.
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 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.
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.