commit 593bb0e7066f7e7335019a04c80b4c446e53cad3
parent 7db6ca70267b0d207b0cad345bf8ae202ab98726
Author: Hugo Soucy <hugo@soucy.cc>
Date: Tue, 28 Mar 2023 13:11:42 -0400
Enhance the examples
Diffstat:
1 file changed, 54 insertions(+), 13 deletions(-)
diff --git a/content/2022/tx/webdev-unix/css.md b/content/2022/tx/webdev-unix/css.md
@@ -134,28 +134,50 @@ sera donc un peu moindre:
cat global.css | tr -d '\n\r' > "$global.min.css"
-Ce n'est pas la façon la plus optimale de minifier, mais avec
-plusieurs feuilles style cela permet de faire des gains de plusieurs
-kilooctets. Sinon avec l'utilitaire `sed`, il est sans doute possible
-d'améliorer la soustraction.
-
-<!-- https://siongui.github.io/2016/03/11/makefile-concetenate-and-minify-css-via-sed-and-tr/ -->
-<!-- https://www.tero.co.uk/scripts/minify.php -->
-<!-- https://mohammadthalif.wordpress.com/2016/07/25/how-to-minify-css-using-simple-bash-commands/ -->
-<!-- Retirer les commentaires avec sed -->
-<!-- sed "/\/\*.*\*\//d;/\/\*/,/\*\// d" file -->
Le caractère `|`, que l'on appelle *pipe*, sert à lier deux processus
en prenant le flux de sortie du premier, pour en faire le flux
d'entrée du second.
-Rendu ici, on peut mettre ensemble la concaténation et minification:
+Nous pourrions aussi retirer les *tabs* avec `tr -d '\t'`, et les
+espaces multiples avec `tr -s ' ' ' '`. Cependant je ne conseillerais
+pas de supprimer les espaces simples avec `tr`, et ce, parce que des
+fonctions CSS comme `calc()`, [nécessitent des espaces entre certains
+opérateurs](https://developer.mozilla.org/en-US/docs/Web/CSS/calc#notes).
+
+Pour ma part, j'ai développé en [lua](/mots-cles.html#lua), [mon propre petit
+utilitaire](https://codeberg.org/hs0ucy/cssmin "cssmin is a CLI
+utility to removes line breaks, comments and spaces around symbols in
+a CSS file") pour contourner ce genre particularités. Ceci dit,
+dépendamment de la taille total de votre fichier CSS, les gains sont
+assez négligeables.
+
+Voyons maintenant à quoi ressemble notre minification avec ces deux
+commandes `tr` supplémentaires...
+
+ cat global.css | tr -d '\n\r' | tr -d '\t' | tr -s ' ' ' ' > "$global.min.css"
+
+
+### Retirer les commemtaires avec `sed`
+
+Malgré que, ce ne soit pas la façon la plus optimale de minifier, cela
+permet de faire des gains de plusieurs kilo-octets.
+
+Mais les blocs de commentaires demeurent, et `sed` pourrait sans doute
+les retirer pour nous:
+
+ cat global.css | tr -d '\n\r' | tr -d '\t' | tr -s ' ' ' ' | sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba'
+
+
+## Conclusion
+
+Rendu ici, nous pouvons rassembler la concaténation et minification:
#!/bin/sh
while read -r line; do
[ -n "$line" ] && cat "./$line"
- done <<EOF | tr -d '\n\r' > "global.min.css"
+ done <<EOF | tr -d '\n\r' | tr -d '\t' | tr -s ' ' ' ' | sed -r ':a; s%(.*)/\*.*\*/%\1%; ta; /\/\*/ !b; N; ba' > "global.min.css"
global/tokens/typography.css
global/tokens/colors.css
global/tokens/grid.css
@@ -164,4 +186,23 @@ Rendu ici, on peut mettre ensemble la concaténation et minification:
global/a11y.css
EOF
----
+Pas si mal hein? Sans rien installer d'externe sur notre poste de
+travail, nous sommes en mesure de concaténer et réduire la taille des
+fichiers CSS, avec à peine, quelques lignes de [POSIX
+shell](https://shellhaters.org/).
+
+Et, contrairement à de la configuration de modules NodeJS, ce que nous
+apprenons ici, peut nous servir dans d'autres contextes qui, n'ont
+rien à voir avec le développement web.
+
+* Le fichier [css.sh](https://soucy.cc/git/hscc/file/src/css/css.sh.html) que j'utilise ici.
+
+## Post-scriptum
+
+[entr](https://eradman.com/entrproject/), est un utilitaire qui permet
+d'exécuter des commandes quand des fichiers sont modifiés.
+
+Ce qui en fait l'outil parfait pour mettre à jour automatiquement les
+changements portés à nos feuilles de styles:
+
+ find . | entr -d ./css.sh
