Sur cette page

• Configurer le traitement des assets
• Charger une feuille de style
• Regrouper des fichiers JavaScript
• Ajouter l’intégrité des sous-ressources
• Intégrer le CSS critique

Compiler, minifier et ajouter une empreinte aux fichiers CSS et JavaScript

Cecil peut compiler des fichiers Sass, minifier le CSS et le JavaScript, et ajouter une empreinte du contenu aux noms de fichiers (cache busting) directement depuis vos templates, sans outil de build externe.

Configurer le traitement des assets

Les fichiers sources sont stockés dans le répertoire assets/. Le traitement est activé par défaut et peut être ajusté dans cecil.yml :

assets:
  compile:
    style: compressed                  # `expanded` (par défaut) ou `compressed`
    import: [sass, scss, node_modules] # répertoires d’import (par défaut)
  minify: true                         # minifie le CSS et le JS
  fingerprint: true                    # ajoute l’empreinte du contenu aux noms de fichiers

Charger une feuille de style

Créez un asset à partir d’un fichier Sass et générez l’élément <link> avec la fonction html. Le fichier Sass est compilé en CSS, puis minifié et doté d’une empreinte selon la configuration :

{{ html(asset('css/styles.scss')) }}

Les filtres peuvent être chaînés pour appliquer chaque étape explicitement, ce qui est utile si une fonctionnalité (comme minify ou fingerprint) est désactivée globalement :

{{ asset('css/styles.scss')|to_css|minify|fingerprint }}

Regrouper des fichiers JavaScript

Passez un tableau de chemins pour créer un bundle unique, avec un nom de fichier personnalisé :

{{ html(asset(['js/menu.js', 'js/search.js'], {filename: 'scripts.js'})) }}

Les options peuvent aussi être définies par asset, par exemple pour ne pas minifier un fichier distant déjà minifié :

{{ html(asset('https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.3.1/anchor.min.js', {minify: false})) }}

Ajouter l’intégrité des sous-ressources

Utilisez la fonction integrity (ou l’attribut integrity de l’asset) pour générer une empreinte (hash) sha384 :

{% set styles = asset('css/styles.scss') %}
<link rel="stylesheet" href="{{ url(styles) }}" integrity="{{ integrity(styles) }}" crossorigin="anonymous">

Intégrer le CSS critique

Affichez le contenu d’un asset avec le filtre inline :

<style>{{ asset('css/critical.scss')|to_css|minify|inline }}</style>

Pour quelques lignes de styles écrites directement dans le template, utilisez les filtres scss_to_css et minify_css :

<style>
{% apply scss_to_css|minify_css %}
  $color: #fcfcfc;
  body {
    background-color: $color;
  }
{% endapply %}
</style>