Symfony2, loading css files without cache

Question

Currently i'm doing design of site based on symfony2, question is how to disable cache of css files? Now if i change something in css file - nothing changes in browser. When i try to cache:clear - still nothing.

config.yml:

# Assetic Configuration
assetic:
debug:          "%kernel.debug%"
use_controller: true
#bundles:        [ ]
#java: /usr/bin/java
filters:
    cssrewrite: ~
    #closure:
    #    jar: "%kernel.root_dir%/Resources/java/compiler.jar"
    yui_css:
        jar: "%kernel.root_dir%/Resources/java/yuicompressor-2.4.7.jar"

and in twig

    {% stylesheets filter="cssrewrite" output="css/general.css"
        "@EveCommonBundle/Resources/public/css/main.css" 
        "@EveCommonBundle/Resources/public/css/another.css" %}
    <link rel="stylesheet" type="text/css" href="{{ asset_url }}" />
    {% endstylesheets %}

What must i change to get "latest" css file in browser?

Problem is that when i change @EveCommonBundle/Resources/public/css/main.css, in web/css still remain old one (dumped by terminal), and it's not been recreated, that's why no "new changes" shows in browsers, and recreate that file i can only by terminal... how can i get sf2 recreate css files on each F5 in browser (in web/css folder)?

Solution 1

Problem was.... Uhm, don't even know in what but. Current config.yml and console commands done their job. (means that what ever i change in css it will shows as "online mode" in browser)

assets:install web --symlink
assetic:dump web

parts from config.yml

# Twig Configuration
twig:
    cache:            false

# Assetic Configuration
assetic:
    assets: 
        default_css:
            inputs:
                - '%kernel.root_dir%/Resources/public/css/default.css'

    debug:          "%kernel.debug%"
    use_controller: true
    bundles:        []
    #java: /usr/bin/java
    filters:
        cssrewrite: ~

Also helps (maybe, don't know)

// If you don't want to setup permissions the proper way, just uncomment the following PHP line
// read http://symfony.com/doc/current/book/installation.html#configuration-and-setup for more information

umask(0000);

In twig it looks like this

{% stylesheets "@default_css" filter="cssrewrite" %}
    <link href="{{ asset_url }}" type="text/css" media="all" rel="stylesheet" />
{% endstylesheets %}   

With this params I can create\edit\delete any data from css and it would be show in browser immediately.

PS: I showed code "not common", other settings in config.yml i think the same as base one.

Solution 2

In your dev-environment, i.e. when accessing your site via app_dev.php, the paths to the assets are generated dynamically and thus each change should be immediately visible.

You can use the following command to automatically create assets (more on this can be found in the cookbook, see link below), but generally this should not be necessary:

php app/console assetic:dump --watch

When using assetic and you want to see your changes in the prod-environment, you have to dump the assets first to make them accessible:

php app/console assetic:dump --env=prod --no-debug

For more information read the section Dumping Asset Files in How to use Assetic for Asset Management in the cookbook.

If all else fails, you might want to use the following in your templates:

{% if app.environment == 'prod' %}{% else %}{% endif %}

to only use assetic when in production environment.

Solution 3

Caching is a standard browser behavior. You can either clear it manually each time, or set up a cache manifest : https://developer.mozilla.org/en-US/docs/HTML/Using_the_application_cache?redirectlocale=en-US&redirectslug=Offline_resources_in_Firefox This is HTML5 though and is not supported everywhere.

A simple way to disable the caching of files is to change the url each time the file changes : you can append a random string or a version number to your href :

<link rel="stylesheet" type="text/css" href="{{ asset_url }}?{{some_random_string_goes_here}}=0" />

or

<link rel="stylesheet" type="text/css" href="{{ asset_url }}?VERSION={{version_number}}" />

The random string is simplier for debugging purpose, since you don't need to update the version number manually each time you change your css. But depending on the size of the string, you might get unlucky and get the same string twice...