Assetic and generating new filename every change

Question

Hi i am using assetic in symfony 3. But i have problem my assets are defined like this:

{% stylesheets filter='cssrewrite' filter='?uglifycss'
        'assets/font-awesome-4.6.3/css/font-awesome.min.css'
        'assets/bootstrap-3.3.7/css/bootstrap.min.css'
         ...
%}

In console run php bin/console assetic:watch

After change in css or js it will generate new file but with same name for example ce9c2ef.css.

But it is problem because after deploy, css file has changes content but no filename so all people see old css...

Q: How i can change generated file name every change in css?

There is options 'output='path/filename.js' in {% stylesheets %} but there i can't add <?php echo $var; ?> or {{ var }}...

UPDATE:

assetic config:

assetic:
debug:          '%kernel.debug%'
use_controller: '%kernel.debug%'
filters:
    cssrewrite: ~
    uglifyjs2:
        bin: "%kernel.root_dir%/Resources/node_modules/uglify-js/bin/uglifyjs"
    uglifycss:
        bin: "%kernel.root_dir%/Resources/node_modules/uglifycss/uglifycss"

templating config:

templating:
    engines: ['twig']

EDIT:

So i found solution PARTIAL solution:

To config add:

assetic:
    workers:
        cache_busting: ~

and after that, your file will looks like ce9c2ef-d1e35a0_filename.css in develop and ce9c2ef-d1e35a0.css in prod...

but in deploy you must clear cache first so you have 2 hashes first ce9c2ef still the same (I do not understand the point of existence) and second d1e35a0 is changing so it finally resolving problem with browser cache....

But if you make changes in css, assetic:watch compile it, but page loads old files...!

Worst bundle ever i mean that changing filename is basic thing and on the internet is so many ways how resolve it and i was tryed one after another 1 day until i finally succeed...

Answer 1

When you're using assetic, one way to solve your issue is by giving your assets a version in your framework:templating section of app/config.yml:

assets:
    version: "%application_version%"

Then you can specify your version in your parameters.yml/parameters.yml.dist file:

parameters:
    application_version: 1.0.1

Then you can load your stylesheets or javascript like so:

{% stylesheets output='css/sites.css' filter='cssrewrite'
    'assets/font-awesome-4.6.3/css/font-awesome.min.css'
    'assets/bootstrap-3.3.7/css/bootstrap.min.css'
     ...
%}
    <link href="{{ asset_url }}" type="text/css" rel="stylesheet" media="all" />
{% endstylesheets %}

Now when you dump your assets, it will automatically append ?1.0.1 (or whatever version you are on" to the end of them. For example, in production you would see the following:

<link href="/css/site.css?1.0.1" type="text/css" rel="stylesheet" media="all" />

Note that there are different ways of doing naming strategies, and this can get tricky if you forget to update your assets version every time you make changes to your assets, but there are ways to improve upon that strategy. This should get you up and running though.

If you notice I didn't manually specify the uglify* filters - you can have these automatically applied by putting this in your app/config_prod.yml:

assetic:
    filters:
        uglifycss:
            apply_to: "\.css$"
        uglifyjs2:
            apply_to: "\.js$"