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 empreinter 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` ou `compressed`
    import: [sass, scss] # chemins importés
  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, compilez-le avec to_css et générez l’élément <link> avec la fonction html :

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

Les filtres peuvent être chaînés pour contrôler chaque étape explicitement, ce qui est utile si une fonctionnalité 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 laisser un fichier distant intact :

{{ 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 un hash sha384 :

{% set styles = asset('css/styles.scss')|to_css %}
<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>