Blue sedan on snow field, Oziel Gomez on Unsplash Blue sedan on snow field, Oziel Gomez on Unsplash

NPM face à Gulp et Grunt

Grâce aux task runner comme Grunt ou Gulp, on s'épargne énormément de temps dans les tâches de construction en automatisant les processus de développement web comme la compilation sass ou l'optimisation d'images par lot. On oublie souvent que NPM, le gestionnaire de dépendances de Node.js, permet d'executer des scripts.

Avantages de NPM

Contrairement aux task runner qui utilisent un système de plugins, NPM permet d'utiliser les packages ou scripts directement, soit de façon programmatique soit en ligne de commandes (CLI). Avec NPM, pas de couche d'abstraction inutile.

NPM permet de s'affranchir de la dépendance vis à vis des auteurs de plugins et de bénéficier des dernières mises à jour des packages en temps réel.

En juin 2019, 1 000 000 de packages étaient disponibles dans le dépôt NPM, très très loin devant les 6520 plugins de Grunt et ou les 3955 de Gulp.

J'ai remplacé NPM par Yarn, un gestionnaire de dépendances plus rapide et plus fiable. Yarn corrige et améliore les fonctionnalités de NPM tout en restant complètement compatible.

Exemple avec Sass

Comme préalable, Node.js doit être installé sur votre machine.

Dans cet exemple, on veut compiler des fichiers scss et appliquer les préfixes vendeurs avec autoprefixer.
Nous allons utiliser la version CLI de Sass dart-sass et le plugin autoprefixer de postCSS.
Enfin, pour créer un script multitâche, nous allons utiliser npm-run-all.
Sass et postCSS sont installés globalement pour une utilisation en ligne de commande.

Si Chocolatey est disponible sur votre poste, utilisez le pour installer Sass car cette version est plus rapide selon la documentation officielle.

Création du projet

# création du projet et positionnement
$ mkdir mon-projet && cd mon-projet

# création du dossier src et du fichier scss
$ mkdir src && touch src/styles.scss

# création du package.json
$ yarn init -y

Installation des dépendances

# installation Sass
$ yarn global add sass

# installation postcss-cli
$ yarn global add postcss-cli

# installation de autoprefixer et npm-run all
$ yarn add autoprefixer npm-run-all

On utilisera le flag --version pour vérifier l'installation et le flag --help pour obtenir de la documentation sur la syntaxe.

$ sass --version
1.25.0

On crée un fichier de configuration postcss.config.js à la racine du projet pour que postCSS utilise le plugin autoprefixer.

// fichier: postcss.config.js
module.exports = {
plugins: {
autoprefixer: true
}
};

Création des tâches

A l'instar de Gulp 4, npm-run-all permet d'enchaîner les tâches de façon séquentielle ou parallèle.
On crée le script styles qui enchaîne les tâches sass et autoprefixer de façon séquentielle grâce à run-s la version courte de npm-run-all --sequential. Le flag --print-label va préfixer chaque ligne de sortie avec le nom la tâche courante.

# fichier: package.json
{
"name": "mon-projet",
"version": "1.0.0",
"scripts":
{
"sass": "sass src/styles.scss _dev/styles.css --style=compressed --no-source-map",
"autoprefixer": "postcss ./_dev/styles.css --replace",
"styles": "run-s sass autoprefixer --print-label",
},
"license": "MIT",
"dependencies": { "autoprefixer": "^9.7.4", "npm-run-all": "^4.1.5" },
}

Lancement du script

$ yarn styles
yarn run v1.21.1
$ run-s sass autoprefixer --print-label
[sass ] $ sass src/styles.scss _dev/styles.css --style=compressed --no-source-map
[autoprefixer] $ postcss ./_dev/styles.css --replace
Done in 1.71s.

Après cet exemple, j'espère vous aurez envie de creuser plus avant avec NPM et pourquoi pas, lui offrir une place dans vos développements web.

Liens