Table des matières
Assetic combine deux idées principales: les Assets et les filtres. Les Assets sont des fichiers tels que CSS, JavaScript et les fichiers image. Les filtres sont des choses qui peuvent être appliquées à ces fichiers avant qu'ils ne soient transmis au navigateur. Cela permet une séparation entre les fichiers de ressources stockées dans l'application et les fichiers réellement présentés à l'utilisateur.
Sans Assetic, il vous suffit de répondre aux fichiers qui sont stockés dans l'application directement:
<script src="{{ asset('js/script.js') }}" type="text/javascript" />
<script src="<?php echo $view['assets']->getUrl('js/script.js') ?>" type="text/javascript" />
Mais avec Assetic, vous pouvez manipuler ces Assets comme vous le voulez (ou les charger depuis n'importe quel endroit) avant de les servir. Ces moyens, vous pouvez:
Utilisation Assetic fournit de nombreux avantages dessert directement les fichiers. Les fichiers n'ont pas besoin d'être stockés, où ils sont servis à partir et peuvent être tirées de diverses sources telles que de l'intérieur d'un faisceau:
{% javascripts
'@AcmeFooBundle/Resources/public/js/*'
%}
<script type="text/javascript" src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*')) as $url): ?> <script type="text/javascript" src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Pour mettre en feuilles de style CSS, vous pouvez utiliser les mêmes méthodes vues dans cette entrée, à l'exception des feuilles de style avec la balise:
{% stylesheets
'@AcmeFooBundle/Resources/public/css/*'
%}
<link rel="stylesheet" href="{{ asset_url }}" />
{% endstylesheets %}
<?php foreach ($view['assetic']->stylesheets( array('@AcmeFooBundle/Resources/public/css/*')) as $url): ?> <link rel="stylesheet" href="<?php echo $view->escape($url) ?>" /> <?php endforeach; ?>
Dans cet exemple, tous les fichiers dans le répertoire Ressources/public/js/ de l'AcmeFooBundle sera chargé et servira à partir d'un emplacement différent. La balise réelle rendu pourrait tout simplement ressembler à:
<script src= "/app_dev.php/js/abcd123.js"> </ script>
C'est un point clé: une fois que vous laissez Assetic gérer vos Assets, les fichiers sont utilisés à partir d'un emplacement différent. Cela peut causer des problèmes aussi bien avec les fichiers CSS qu'avec les images de référence par leur chemin d'accès relatif. Cependant, ceci peut être corrigé en utilisant le filtre cssrewrite, qui met à jour des chemins dans les fichiers CSS pour indiquer leur nouvel emplacement.
Vous pouvez aussi combiner plusieurs fichiers en un seul. Cela contribue à réduire le nombre de requêtes HTTP, ce qui est idéal pour des performances de bout avant. Il vous permet également de maintenir les fichiers plus facilement en les découpant en parties gérables. Cela peut aider à ré-utilisabilité que vous pouvez facilement diviser projet les fichiers spécifiques à partir de celles qui peuvent être utilisés dans d'autres applications, mais toujours les servir en un seul fichier:
{% javascripts
'@AcmeFooBundle/Resources/public/js/*'
'@AcmeBarBundle/Resources/public/js/form.js'
'@AcmeBarBundle/Resources/public/js/calendar.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*', '@AcmeBarBundle/Resources/public/js/form.js', '@AcmeBarBundle/Resources/public/js/calendar.js')) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Dans l'environnement de dev, chaque fichier est toujours utilisé individuellement, de sorte que vous pouvez déboguer les problèmes plus facilement. Toutefois, dans l'environnement prod, ce sera rendu par une balise script unique.
Si vous êtes nouveau Assetic et essayez d'utiliser votre application dans l'environnement de prod (en utilisant le contrôleur app.php), vous verrez probablement que tous vos CSS et JS pauses. Ne vous inquiétez pas! C'est fait exprès.
Et combiner des fichiers ne s'applique pas seulement à vos fichiers. Vous pouvez également utiliser Assetic de combiner des Assets de tiers, tels que jQuery, avec votre propre en un seul fichier:
{% javascripts
'@AcmeFooBundle/Resources/public/js/thirdparty/jquery.js'
'@AcmeFooBundle/Resources/public/js/*'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/thirdparty/jquery.js', '@AcmeFooBundle/Resources/public/js/*')) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Une fois qu'ils sont gérés par Assetic, vous pouvez appliquer des filtres à vos Assets avant qu'ils ne soient servis. Cela inclut des filtres qui compriment la sortie de vos Assets pour les tailles de fichiers plus petits (et mieux frontal d'optimisation). D'autres filtres peuvent compiler le fichier JavaScript à partir de fichiers CoffeeScript et traiter SASS en CSS. En fait, Assetic a une longue liste des filtres disponibles.
La plupart des filtres ne pas faire le travail directement, mais utilisent existantes des bibliothèques tierces pour faire le gros-. Cela signifie que vous aurez souvent besoin d'installer une bibliothèque tierce partie d'utiliser un filtre. Le grand avantage de l'utilisation de Assetic d'invoquer ces bibliothèques (par opposition à les utiliser directement), c'est qu'au lieu d'avoir à les exécuter manuellement une fois que vous travaillez sur les fichiers, Assetic prendra soin de cela pour vous et retirez cette étape tout à fait de votre développement processus de déploiement et.
Pour utiliser un filtre, vous devez d'abord le spécifier dans la configuration Assetic. Ajout d'un filtre ici ne signifie pas qu'il est utilisé - cela veut juste dire qu'il est disponible à utiliser (nous allons utiliser le filtre ci-dessous).
Par exemple, pour utiliser le JavaScript YUI Compressor la config suivante devrait être ajoutée:
# app/config/config.yml
assetic:
filters:
yui_js:
jar: "%kernel.root_dir%/Resources/java/yuicompressor.jar"
<!-- app/config/config.xml -->
<assetic:config>
<assetic:filter
name="yui_js"
jar="%kernel.root_dir%/Resources/java/yuicompressor.jar" />
</assetic:config>
// app/config/config.php $container->loadFromExtension('assetic', array( 'filters' => array( 'yui_js' => array( 'jar' => '%kernel.root_dir%/Resources/java/yuicompressor.jar', ), ), ));
Maintenant, pour effectivement utiliser le filtre sur un groupe de fichiers JavaScript, ajoutez-le dans votre modèle:
{% javascripts
'@AcmeFooBundle/Resources/public/js/*'
filter='yui_js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*'), array('yui_js')) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Un guide plus détaillé sur la configuration et l'utilisation de filtres Assetic ainsi que les détails de mode debug Assetic peut être trouvé dans Comment minifier javascripts et feuilles de style avec yui compressor
Si vous le souhaitez, vous pouvez contrôler les URL qui Assetic produit. Ceci est fait à partir du modèle et est relatif à la racine du document public:
{% javascripts
'@AcmeFooBundle/Resources/public/js/*'
output='js/compiled/main.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*'), array(), array('output' = > 'js/compiled/main.js') ) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>
Symfony contient également une méthode pour avoir contrevenu aux cache, où l'URL finale générée par Assetic contient un paramètre de requête qui peut être incrémenté par la configuration de chaque déploiement. Pour plus d'informations, consultez le assets_version option de configuration.
Dans l'environnement de dev, Assetic génère des trajectoires aux fichiers CSS et JavaScript qui n'existent pas physiquement sur votre ordinateur. Mais ils rendent néanmoins un contrôleur, car Symfony interne ouvre les fichiers et sert le dos du contenu (après l'exécution de tous les filtres).
Ce type de diffusion dynamique de l'Asset traitées est génial car il signifie que vous pouvez immédiatement voir le nouvel état de tous les fichiers Assets vous modifiez. C'est aussi mauvais, car il peut être assez lente. Si vous utilisez un grand nombre de filtres, il pourrait être carrément frustrant.
Heureusement, Assetic fournit un moyen de vider vos biens à des fichiers réels, au lieu d'être généré dynamiquement.
Dans l'environnement de prod, votre JS et CSS sont représentés par une seule étiquette de chaque. En d'autres termes, au lieu de voir chaque fichier JavaScript que vous y compris dans votre source, vous aurez probablement juste voir quelque chose comme ceci:
<script src= "/app_dev.php/js/abcd123.js"> </script>
En outre, ce fichier n'existe pas réellement, ni est-il rendu dynamique par Symfony (comme les fichiers Assets sont dans l'environnement dev). C'est à dessein - de laisser Symfony générer ces fichiers de manière dynamique dans un environnement de production est tout simplement trop lent.
Au lieu de cela, chaque fois que vous utilisez votre application dans l'environnement prod (et donc, chaque fois que vous déployez), vous devez exécuter la tâche suivante:
php app/console assetic:dump --env=prod --no-debug
Ce sera physiquement générer et à écrire chaque fichier que vous avez besoin (par exemple /js/abcd123.js). Si vous mettez à jour l'un de vos Assets, vous aurez besoin pour exécuter ce nouveau pour régénérer le fichier.
Par défaut, chaque chemin d'Assets générés dans l'environnement de dev est gérée dynamiquement par Symfony. Cela n'a aucun inconvénient (vous pouvez voir vos modifications immédiatement), sauf que les Assets peuvent charger nettement lente. Si vous sentez que vos Assets sont de chargement trop lentement, suivez ce guide.
Tout d'abord, dire à symfony d'arrêter d'essayer de traiter ces fichiers de manière dynamique. Faire la modification suivante dans votre fichier config_dev.yml:
# app/config/config_dev.yml assetic: use_controller: false
<!-- app/config/config_dev.xml -->
<assetic:config use-controller="false" />
// app/config/config_dev.php $container->loadFromExtension('assetic', array( 'use_controller' => false, ));
Ensuite, puisque Symfony n'est plus la génération de ces Assets pour vous, vous aurez besoin de les vider manuellement. Pour ce faire, exécutez la commande suivante:
php app/console assetic:dump
Ceci écrit physiquement tous les fichiers Assets vous avez besoin pour votre environnement de dev. Le gros inconvénient est que vous devez exécuter ce chaque fois que vous mettez à jour un atout. Heureusement, en passant l'option —watch, la commande va générer automatiquement des Assets car elles peuvent changer:
php app/console assetic:dump --watch
Depuis exécutant cette commande dans l'environnement de dev peut générer un tas de fichiers, il est généralement une bonne idée de pointer vos fichiers générés Assets dans un répertoire isolé (par exemple /js/compiled), à garder les choses organisées:
{% javascripts
'@AcmeFooBundle/Resources/public/js/*'
output='js/compiled/main.js'
%}
<script src="{{ asset_url }}"></script>
{% endjavascripts %}
<?php foreach ($view['assetic']->javascripts( array('@AcmeFooBundle/Resources/public/js/*'), array(), array('output' = > 'js/compiled/main.js') ) as $url): ?> <script src="<?php echo $view->escape($url) ?>"></script> <?php endforeach; ?>