Publié le 2 commentaires

Compiler du SCSS avec gitlab ci/cd 🚀

Bonjour à tous et bonne année 2021 !

On commence cette annĂ©e en force avec une petite astuce que j’utilise sur mon système de grille css.

Évidemment, j’utilise un prĂ©processeur pour me faciliter le travail et surtout gagner en lisibilitĂ© de code, mais le problème, c’est que c’est assez saoulant de compiler le css et de le mettre dans une release (temps que je pourrais passer Ă  faire un truc productif (ou pas)).

J’hĂ©berge mon code sur l’instance gitlab de framasoft (framagit), l’avantage de gitlab est qu’il vient avec un système qui permet de faire de la livraison continue

Le but est de construire, tester et diffuser un logiciel plus rapidement.

Source : Wikipedia

On va donc voir comment utiliser ça en pratique.

Pour faire de la livraison continue avec gitlab, il suffit de créer un fichier nommé .gitlab-ci.yml et de renseigner les infos nécessaires dedans.

Je ne vais pas perdre de temps, je vais vous donner le code tout de suite :

stages:
- compile

compile:
stage: compile
image: node:14.15.1-alpine3.10
script:
- yarn global add node-sass
- mkdir css/
- node-sass --output-style compressed ./fichier.scss > css/fichier.min.css
- node-sass ./fichier.scss css/fichier.css
artifacts:
paths:
- ./css

J’imagine que si vous n’ĂŞtes pas initiĂ©s, ce code ne vous dit rien, donc je vais vous l’expliquer :

  • Ligne 1 et 2 : On indique Ă  gitlab qu’il y aura une Ă©tape de compilation.
  • Ligne 4 et 5 : On indique Ă  gitlab que l’Ă©tape « compile » commence
  • Ligne 6 : On indique que l’image docker Ă  utiliser (oui, gitlab cd fonctionne avec docker) est une image de alpine (une distribution linux lĂ©gère) avec nodeJS prĂ©installĂ©
  • Ligne 7 : On dĂ©marre le script
  • Ligne 8 : On installe sass avec yarn
  • Ligne 9 : On crĂ©e un dossier pour distribuer les fichiers compilĂ©s.
  • Ligne 10 et 11 : On compile le fichier .scss (ou .sass) en version compressĂ©e et non compressĂ©e
  • Ligne 12,13 et 14 : On indique Ă  gitlab que les fichiers compilĂ©s se trouvent dans le dossier css/

Voila, vous pouvez enregistrer le fichier, la « pipeline » qu’on pourrait traduire par une compilation de notre fichier va se lancer.

Cette pipeline va se lancer après chaque commit et vous pouvez consulter l’Ă©tat de vos pipelines dans le menu CI/CD > Pipelines.

Enfin, pour télécharger les 2 fichiers, vous pouvez utiliser ce menu puis cliquer sur « compile » :

C’est la fin de cet article, merci de l’avoir lu et n’hĂ©sitez pas Ă  me faire des remarques dans les commentaires ;).

Image de couverture par James Osborne de Pixabay

2 rĂ©flexions au sujet de « Compiler du SCSS avec gitlab ci/cd 🚀 »

  1. Merci mais tu pourrais aussi faire des videos ?

    1. Ce n’est pas encore en projet, mais je vais y rĂ©flĂ©chir 🙂

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *