Sur mon blog vous trouverez plusieurs articles sur l’utilisation de Gulp, avec nodejs pour compiler et minifier des fichiers CSS et JS. Ce type de configuration est plutôt complexe et plusieurs librairie sont plus ou moins onbolètes.
Je cherchais donc un moyen de faire la même chose en plus simple. J’ai donc essayé Parcel, et je dois dire que c’est vraiment plus simple.
3 modules nodejs à installer et 1 fichier package.json, c’est très light.
Possibilité de compiler en live (comme avec gulp) avec des versions pour le dev et poiur la prod. Fonctionne même si votre point d’entrée n’est pas une page html. Sur mes projets dans 99% des cas c’est du PHP.
Je vous détaille ci dessous la configuration, ça doit marcher sur n’importe quoi du moment que nodejs est installable 🙂
Configuration utilisée : MacOS (Tahoé) + NodeJS 24.5
Pour tester je me suis créé un dossier de test : mkdir test
J’ai ensuite créé l’arbo suivante : mkdir build src build/static builds/static/dev src/js src/css
Création de quelques fichiers de test :
src/js/app.js : fichier principal point d’entré unique pour Parcel
src/js/module2.js : fichier js supplémentaire
src/css/gui.less : fichier less/css pour le front
src/css/back.less : fichier less/css pour le back
Parcel utilise un point d’entré unique (js) qui doit importer tous les autres fichiers, contenu de app.js
import ../css/gui/less
import ../css/back.less
import ./module2.js
//code js
//....
app.js est dans /src/js, c’est pourquoi le chemin est ../src/ pour importer les fichiers CSS. A vous d’adpter cela à l’arbo de votre projet.
Avec cette config Parcel va générer un fichier app.js avec tout le code JS (app.js+module2.js) et un fichier app.css avec tout le code css de gui.less et back.less.
Vous pouvez ajouter autant de fichiers que nécessaire.
Installation des modules nodejs
Vérifiez que vous avez bien nodejs : nodejs --version
Installez (en local, dans node_modules) parcel et less : npm install --save-dev parcel less
Cette installation crée le fichier package.json qui est le fichier de config principal et que nous allons compléter.
Ci dessous le fichier final, les deux lignes importantes sont « dev » et « build » qui sont les 2 commandes que vous allez utiliser pour compiler vos fichiers css/js pour le dev et pour la prod.
{
"name": "MonProjet",
"version": "1.0.0",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel watch ./js/app.js --dist-dir ../build/static/dev",
"build": "parcel build js/app.js --dist-dir ../build/static --no-content-hash --no-source-maps"
},
"keywords": [],
"author": "",
"license": "ISC",
"type": "commonjs",
"devDependencies": {
"@parcel/transformer-less": "^2.16.4",
"less": "^4.8.0",
"parcel": "^2.16.4"
}
}Pendant votre développement, il faut lancer Parcel avec la commande : npm run dev
Il génère automatiquement les fichiers dans build/assets/dev il suffit dans vos pages d’inclure ces fichiers :
<link rel="stylesheet" type="text/css" href="static/dev/app.css">
<script type="text/javascript" src="static/dev/app.js"></script>Pour le fichiers de prod la commande sera : npm run build
Dans ce cas les fichiers sont générés sont static/app.js et static/app.css, contrairement au mode dev, ces fichiers sont minifiés (suppression de tous les espaces et caractères inutiles). Dans vos pages le code de chargement sera :
<link rel="stylesheet" type="text/css" href="static/app.css">
<script type="text/javascript" src="static/app.js"></script>En PHP il est très facile de gérer cela en dynamique avec par exemple une variable $PROD, qui est a true si vous êtes en prod et dans ce cas utiliser les bonnes urls pour le css et le js. La plus part des frameworks PHP propose ce type d’information.
Pour le gérer en PHP ‘pure’ c’est encore plus simple :
<?php
if ($PROD) {
<link rel="stylesheet" type="text/css" href="static/app.css">
<script type="text/javascript" src="static/app.js"></script>
} else {
<link rel="stylesheet" type="text/css" href="static/dev/app.css">
<script type="text/javascript" src="static/dev/app.js"></script>
}
?>Tips de fin
Si vous utilisez GIT pour versionner vos projets, pensez à ajouter le dossier node_modules dans .gitignore, ce dossier contient beaucoup, beaucoup de fichier et il n’y a aucun intérêt à ce qu’il soit versionné.
Il faut faire de même pour le dossier src/.parcel-cache
Pour allez plus loin, car Parcel propose beaucoup de chose, voici le site officiel : https://parceljs.org/