Odwiedź bezpośrednio główną treść Wyślij nam bezpośrednio wiadomość e-mail

NPM scripts, pourquoi nous avons besoin d'alternatives

Cet article décrit des outils pour le développement, je le recommande pour des développeurs et designers. Cet article sera mis à jour lorsque notre processus change.

Pourquoi les scripts NPM ?

Il y a beaucoup d'outils pour automatiser des tâches (build tools) basés sur NPM. Chacun nécessite des configurations particulières. Ces outils participent à la complexification des projets web, pourtant la majorité des sites internet sont toujours identiques (sites vitrines, blog, etc.). Les scripts NPM sont complexes avec beaucoup de dépendances, mais ils sont toujours plus simples que des build tools. Je ne suis pas un fan de NPM, la centralisation des outils de développement est un risque pour internet.

J'utilise toujours des scripts NPM pour certains projets, mais je me rends bien compte que c'est trop compliqué et risqué sur le long terme. Je préfère me concentrer sur l'ergonomie et la qualité du code. Je n'ai malheureusement pas encore une bonne alternative qui offre les mêmes avantages que NPM et PostCSS, un changement d'état d'esprit est la première étape importante.

NPM scripts : le processus

Il vaut mieux commencer simple (même ennuyeux) et ajouter de la complexité plus tard. HTML/CSS est suffisant pour démarrer.

Vous pouvez trouver plus d'informations sur les scripts sur ce dépôt GIT.

Moins de dépendances et des alternatives décentralisées

Lorsqu'il n'y a pas de connexion internet ou si les paquets NPM sont inaccessibles, les scripts NPM seront impossibles à utiliser. Même s'ils sont installés localement, il faut croiser les doigts pour avoir la bonne version de node et de NPM. Parfois, un paquet a été supprimé et cela peut casser Internet.

Il est préférable d'avoir un processus simple. Il est possible de diviser les fichiers CSS avec CSS import. Pour rappel, n'utilisez pas CSS import en production en raison de problèmes de performance. Une bonne idée de Hugo Soucy est d'utiliser bash pour fusionner les fichiers. Bash est disponible sur une majorité de machines. Même la commande cat peut être utilisée pour fusionner des fichiers.

Une autre option est d'utiliser les paquets ou les extensions des éditeurs. Sublime Text et VsCode par exemple ont des extensions pour minifier et fusionner les fichiers.

Dans ce cas, l'accès à toutes les optimisations (fallback, prefix, etc.) n'est pas possible, mais on évite la centralisation et les dépendances.
Si c'est vraiment nécessaire, il existe des outils en ligne qui nécessitent moins de dépendances et peuvent être utilisés lorsque vous avez un accès à Internet (voir les ressources Outils en ligne).

Structure du CSS

Planifier à l'avance la structure HTML/CSS pendant la phase de conception est probablement la meilleure méthode. Cela semble évident, mais il y a plus de contenus sur les outils d'automatisation et les nouveaux frameworks à la mode que sur la bonne vieille organisation du CSS. Suivre les bonnes pratiques CSS avec une conception, un processus et une structure de fichiers bien organisée permet d'éviter de recourir à des optimisations. Une bonne qualité de code ne nécessite pas de supprimer les CSS inutilisées. Les fallbacks CSS, la prise en charge par les navigateurs peut toujours être un problème, mais il est possible d'éviter ce problème en écrivant les fichiers CSS à partir de zéro.

Une très bonne règle de Devine Lu Linvega est de garder un fichier CSS en dessous de 100 lignes de code. Cela peut sembler extrême, mais pour de nombreux projets, c'est une solution intéressante. Même une limite supérieure est une très bonne pratique pour éviter d'encombrer les fichiers CSS. Nous allons essayer cette méthode sur certains de nos projets. Une limite de poids pour les fichiers CSS est également une bonne idée. Les méthodologies CSS peuvent être très utiles pour organiser les fichiers et les conventions de nommage.

Un web design organisé et planifié offre la liberté de réduire la dépendance à des outils complexes et d'écrire du CSS plus accessible et rapides à charger. Ce type d'organisation demande plus de temps pour préparer le projet, c'est un état d'esprit qui diffère de l'utilisation des outils automatiques, mais la liberté offerte de toute dépendance en vaut la peine.

Si vous connaissez de bonnes alternatives à NPM, qui suppriment la complexité des outils de build, n'hésitez pas à les partager avec nous.

Nous essayons d'améliorer nos méthodes de travail afin d'avoir un processus technique de moins en moins complexe, mais plus élaboré sur le plan humain.

Derek

Ressources

Scripts NPM

Build tools : critiques

Unix/Bash

Éditeurs

Outils en ligne

Méthodologie CSS