I am using assetic to manage my CSS files in the Symfony 2 framework. It works well in production mode.
My problem is that in debug mode, assetic keeps combining my files into one output file. It makes it difficult to track a particular CSS style. Plus the combined file is not always updated.
How can I disable this feature in debug mode ?
Edit: Here is my call to assetic:
{% stylesheets filter='lessphp,cssrewrite'
'#DevoptionBaseBundle/Resources/less/front.less'
'#DevoptionBaseBundle/Resources/less/back.less'
'#DevoptionBaseBundle/Resources/public/css/custom-theme/jquery-ui-1.10.0.custom.css'
'#DevoptionBaseBundle/Resources/public/css/jquery.mCustomScrollbar.css'
output='css/style2.css'
%}
There is a configuration for Assetic
In your config.yml, you should have
# Assetic Configuration
assetic:
debug: %kernel.debug%
use_controller: false
which means that you have to dump the assets in order tu use them.
And in your config_dev.yml, you should have
assetic:
use_controller: true
which means that the assets are loaded each time. You should check this configuration in your config_dev.yml
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.
We have started to use Bower (via SpBower) for managing our js and css libs, before realizing it was not possible to install Bower on our current prod server.
The idea is not to generate files on the prod server, but to dump the prod files on dev environment and upload these dumped files. But even in prod mode, Assetic is looking for the source files and bower registers these vendor files, so Assetic throw this exception
(Twig_Error_Syntax(code: 0): An exception has been thrown during the compilation
of a template (\"There is no \"jquery_js\" asset.\")
Where jquery_js is called after Bower registration in this way
{% javascripts output='js/vendor-1.js'
'#jquery_js'
'#jquery_ui_js'
'#chartjs_js'
'#Chart_StackedBar_js_js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
Is there a way to tell assetic to ignore the assets (jquery_js, jquery_ui_js...) to only look at the output file (vendor-1.js) ? I could not find anything in Symfony2 cookbook.
Below are the Assectic and Sp Bower sections in config.yml
assetic:
debug: "%kernel.debug%"
use_controller: false
bundles: [ ProjectBundle ]
filters:
cssrewrite: ~
sp_bower:
assetic:
nest_dependencies: false
bundles:
ProjectBundle:
asset_dir: ../../public/vendor
cache:
id: ~
directory: ../../public/vendor/cache
And in config_dev.yml
assetic:
use_controller: false
As well as the content of the bower.json file
{
"name": "ProjectBundle",
"dependencies": {
"jquery": "~2.0",
"jquery.countdown": "~2.0",
"jquery-ui": "~1.11",
"bootstrap": "~3.0",
...
}
}
I've found a work around, not very nice but that solves our problem.
The idea is to use sp_bower only on dev env so to put it only in config_dev.yml and manually specifying the named assets on prod env so in config_prod.yml.
We don't have to actually put the correct path to the source file since we won't generate the output files on prod (but use uploaded ones), we can even use a fake js file (for example a file named prodDumpAlert.js) containing for example an alert explaining what's going on.
So the config_dev.yml would look like that :
imports:
- { resource: config.yml }
assetic:
assets:
jquery_js:
inputs:
- '#ProjectBundle/Resources/public/utils/prodDumpAlert.js'
jquery_ui_js:
inputs:
- '#ProjectBundle/Resources/public/utils/prodDumpAlert.js'
chartjs_js:
inputs:
- '#ProjectBundle/Resources/public/utils/prodDumpAlert.js'
...
there is no real detail in the documentation about the AsseticBundle Config - in config.yml.
assetic:
debug: "%kernel.debug%"
use_controller:
enabled: "%kernel.debug%"
profiler: false
read_from: "%kernel.root_dir%/../web"
write_to: "%assetic.read_from%"
java: /usr/bin/java
node: /usr/bin/node
ruby: /usr/bin/ruby
sass: /usr/bin/sass
# An key-value pair of any number of named elements
variables:
some_name: []
bundles:
# Defaults (all currently registered bundles):
- FrameworkBundle
- SecurityBundle
- TwigBundle
- MonologBundle
- SwiftmailerBundle
- DoctrineBundle
- AsseticBundle
- ...
assets:
# An array of named assets (e.g. some_asset, some_other_asset)
some_asset:
inputs: []
filters: []
options:
# A key-value array of options and values
some_option_name: []
filters:
# An array of named filters (e.g. some_filter, some_other_filter)
some_filter: []
workers:
# see https://github.com/symfony/AsseticBundle/pull/119
# Cache can also be busted via the framework.templating.assets_version
# setting - see the "framework" configuration section
cache_busting:
enabled: false
twig:
functions:
# An array of named functions (e.g. some_function, some_other_function)
some_function: []
I'm specially interested in
read_from: don't understand the path, too
write_to:
because I don't really understand how to use it.
So, I want to use SCSS and Compass and I have an folder in AppBundle/Resources/assets/styles/main.scss
What I have to setup in the config.yml, that assetic know how he find the main.scss as a global setting?
Unless you are trying to update the directory from which Assetic reads/writes (thus being /web by default), you don't need to change anything here. The configuration can be understood from a good part on the Symfony documentation. You'll find what you need in:
read_from: "%kernel.root_dir%/../web"
write_to: "%assetic.read_from%"
These are paths to a directory which is writable/readable, and exposed to the public. In this case, it means it will look for /path/to/app/../web for both readings and writings.
In a general manner, check for php app/console config:dump-reference X to find the default configuration of a given bundle, where X is the bundle config name. In your case, try the later: php app/console config:dump-reference assetic
Now, what you want is to use compass/sass from your view as far as I can see.
In your twig file, put the following:
{% stylesheets 'path/to/main.scss' filter='compass' %}
<link rel="stylesheet" type="text/css" href="{{ asset_url }}">
{% endstylesheets %}
After adding the configuration for compass if it needs to be tweaked, you should be all set.
Is it helping? it not, could you please provide more details?
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.. ^^)
I'm wondering if anyone can help me with some AsseticBundle configuration in conjunction with Symfony 2's dev environment.
Each time a page loads in the dev environment Assetic will recompile any assets, in my case I am compiling Sass files using the CompassFilter.
My problem is that when I have a malformed Sass file my page simply loads without any generated stylesheet - instead I want Assetic to show me the Compass/Sass compiler output as if an exception had occurred (i.e. I get the Symfony2 "oops" screen).
Does anyone know if there is a configuration to achieve this?
My current config.yml is:
assetic:
debug: %kernel.debug%
use_controller: false
sass: /var/lib/gems/1.8/bin/sass
filters:
compass:
bin: /var/lib/gems/1.8/bin/compass
apply_to: "\.scss$"
scss: ~
with config_dev.yml overriding only one line to:
assetic:
use_controller: true
No, what you ask for is not supported because the stylesheet is processed when it is requested, not when the HTML is requested. However, you should be able to see the error if you request the referenced stylesheet directly.