hscc

Soure code of <https://hugo.soucy.cc>.
git clone git://soucy.cc/hscc.git
Log | Files | Refs

commit 593bb0e7066f7e7335019a04c80b4c446e53cad3
parent 7db6ca70267b0d207b0cad345bf8ae202ab98726
Author: Hugo Soucy <hugo@soucy.cc>
Date:   Tue, 28 Mar 2023 13:11:42 -0400

Enhance the examples

Diffstat:
Mcontent/2022/tx/webdev-unix/css.md | 67++++++++++++++++++++++++++++++++++++++++++++++++++++++-------------
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