This article is also published in french on my personal blog: https://lelibreauquotidien.fr/2021/01/12/compiler-du-scss-avec-gitlab-ci-cd/
Hello World !
I use a css preprocessor to make my work easier and especially to gain in code readability, but the problem is that it's quite boring to compile the css and put it in a release (time I could spend doing something productive (or not)).
I host my code on the gitlab instance of framasoft (framagit), the advantage of gitlab is that it comes with a system that allows continuous integration.
The goal is to build, test and release software faster.
Source : Wikipedia
So let's see how to use this in practice.
To do continuous delivery with gitlab, you just have to create a file named .gitlab-ci.yml and fill in the necessary information.
I will not waste time, I will give you the code now:
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 ./file.scss > css/file.min.css
- node-sass ./file.scss css/file.css
artifacts:
paths:
- ./css
I imagine that if you are not initiated, this code does not tell you anything, so I will explain it to you:
- Line 1 and 2: Tells gitlab that there will be a compilation step.
- Line 4 and 5: Tells gitlab that the "compile" step is starting
- Line 6 : We indicate that the docker image to use (yes, gitlab cd works with docker) is an image of alpine (a light linux distribution) with nodeJS preinstalled
- Line 7 : Start the script
- Line 8 : Install sass with yarn
- Line 9 : We create a folder to distribute the compiled files.
- Line 10 and 11: We compile the file .scss (or .sass) in compressed and uncompressed version
- Line 12,13 and 14 : We indicate to gitlab that the compiled files are in the folder css/
You can save the file, the "pipeline" that could be translated as a compilation of our file will start.
This pipeline will be launched after each commit and you can check the status of your pipelines in the CI/CD > Pipelines menu.
Finally, to download the 2 files, you can use this menu and click on "compile":
This is the end of this article, thanks for reading it and don't hesitate to give me feedback in the comments ;).
Cover image by James Osborne on Pixabay
Top comments (0)