5 votes

Assetic et génération d'un nouveau nom de fichier à chaque changement

Bonjour, j'utilise assetic dans symfony 3, mais j'ai un problème, mes assets sont définis comme ceci :

{% 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'
         ...
%}

Dans la console, exécutez php bin/console assetic:watch

Après une modification de css ou de js, un nouveau fichier sera généré avec le même nom, par exemple ce9c2ef.css .

Mais c'est un problème car après le déploiement, le fichier css a changé de contenu mais pas de nom de fichier, ce qui fait que tout le monde voit l'ancien css...

Q : Comment puis-je changer le nom du fichier généré à chaque changement de css ?

Il y a une option 'output='path/filename.js' dans {% stylesheets %} mais je ne peux pas l'ajouter. <?php echo $var; ?> o {{ var }} ...

UPDATE :

config assetic :

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"

la configuration du modèle :

templating:
    engines: ['twig']

EDIT :

J'ai donc trouvé une solution partielle :

Pour configurer l'ajout :

assetic:
    workers:
        cache_busting: ~

et après cela, votre fichier ressemblera à ce9c2ef-d1e35a0_filename.css dans le développement et ce9c2ef-d1e35a0.css en prod...

mais dans le cadre du déploiement, vous devez effacer d'abord le cache Vous avez donc d'abord deux hachages ce9c2ef toujours la même (je ne comprends pas l'intérêt de l'existence) et la seconde d1e35a0 change, ce qui résout finalement le problème du cache du navigateur....

Mais si vous faites des changements dans les css, assetic:watch les compile, mais la page chargements anciens fichiers... !

La pire des offres groupées Je veux dire que le changement de nom de fichier est une chose basique et sur internet il y a tellement de façons de le résoudre que j'ai essayé l'une après l'autre pendant un jour jusqu'à ce que je réussisse enfin...

2voto

Jason Roman Points 6484

Lorsque vous utilisez assetic, une façon de résoudre votre problème est de donner à vos actifs une version dans votre fichier framework:templating section de app/config.yml :

assets:
    version: "%application_version%"

Vous pouvez ensuite spécifier votre version dans votre parameters.yml/parameters.yml.dist fichier :

parameters:
    application_version: 1.0.1

Ensuite, vous pouvez charger vos feuilles de style ou votre javascript comme suit :

{% 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 %}

Désormais, lorsque vous viderez vos actifs, il ajoutera automatiquement les éléments suivants ?1.0.1 (ou la version que vous utilisez) à la fin de ceux-ci. Par exemple, en production, vous obtiendrez ce qui suit :

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

Notez qu'il existe différentes façons d'appliquer les stratégies de dénomination, et que cela peut s'avérer délicat si vous oubliez de mettre à jour la version de vos actifs à chaque fois que vous les modifiez, mais il existe des moyens d'améliorer cette stratégie. Cela devrait vous permettre d'être opérationnel.

Si vous remarquez que je n'ai pas spécifié manuellement l'option uglify* les filtres - vous pouvez les appliquer automatiquement en les plaçant dans votre app/config_prod.yml :

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

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X