Cet article fait suite à ma conférence au WordCamp Paris 2018, ou je faisais une démonstration de l’utilisation de Gulp dans un thème WordPress, qui permet de compiler les fichiers CSS, JS, les compresser, recharger automatiquement le navigateur et bien d’autres encore. Démonstration.

WordCamp Paris 2018

Cette année le WordCamp Paris s’est déroulé le 9 mars, à la MAS avec un programme intense et des conférences très enrichissantes. On a pu notamment découvrir une démonstration de Gutenberg, le nouvel éditeur de WordPress, apprendre à faire son premier thème, des études de cas de l’utilisation WordPress dans les grands groupes…

C’était d’ailleurs déjà le dixième anniversaire du WordCamp Parisien. J’en profite pour remercier les organisateurs qui font un travail remarquable à chaque édition.

Sur twitter le hashtag #WCParis a été très actif et vous pourrez y retrouver toutes les slides des conférences.

L’équipe d’organisation, les sponsors et les orateurs.

Gulp et ses amis

Bref, revenons-en au sujet : Gulp.

Alors pourquoi Gulp d’abord, puisqu’il existe de nombreux outils comme Grunt, Brunch, ou encore Webpack ? J’ai choisi Gulp pour sa simplicité de mise en oeuvre. J’aime quand c’est simple et vous allez voir qu’ici j’ai vraiment réduit au maximum la tâche « humaine ».

Voici les slides qui ont servi à ma présentation :

Slides de ma présentation Gulp

Et voici également le thème exemple avec ma configuration Gulp que je vous invite à copier/coller dans vos propres projets :

Thème Gulp sur Github

A quoi sert Gulp ?

Gulp est un outil qui vous sera utile pour le développement de vos sites. C’est un utilitaire qui vous permet de surveiller votre dossier de travail, et lorsque vous modifiez un fichier, va effectuer certaines tâches pour vous simplifier la vie, voici quelques exemples :

• Compilation Préprocesseurs CSS (Sass, Less, Stylus…)
• Minification des fichiers JS / CSS ( = compression) 
• Rafraîchissement auto de la page ( = plus besoin de faire CTRL+R)
• Navigation synchronisée entre appareils ( = plus besoin de répéter scroll, clics, remplissage de formulaires sur chaque appareil)
• Autoprefixer CSS ( = pour la rétrocompatibilité )
• JS Lint : détection d’erreur JS ( = détecter tout de suite les erreurs JS) 

Il existe d’autres tâches, et des milliers de modules à installer pour tous vos besoins grâce à NPM, on y revient.

Ma fonction préférée : navigation synchronisée

Afin de tester le responsive web design d’un site, il est utile de pouvoir accéder au site depuis son mobile, sa tablette, et ce même s’il n’est installé qu’en local sur sa machine.

Browsersync a justement cette utilité : donner une adresse accessible depuis le réseau, afin que chaque appareil puisse s’y connecter.

Comme vous pouvez le voir sur cette image, j’ai mon site affiché sur tous mes périphériques.

Lorsque je vais modifier un style et enregistrer mon fichier Stylus (ou Sass), il va automatiquement être compilé par Gulp, puis Browsersync va automatiquement rafraichir toutes les pages web en même temps.

Comme ça je n’ai pas à aller sur chaque appareil pour y rafraichir la page (Hashtag F5 addicts). Cela me permet de contrôler le responsive web design de mes sites efficacement et sans perte de temps.

Encore mieux : Si je scrolle, si je clique quelque part, si je remplis un formulaire, l’information sera transmise à tous les périphériques qui mimeront l’action.

Vous voyez un peu le gain de temps là ? Et bien pour faire pareil sur votre thème, il vous faudra seulement 2 lignes de commande !

Le sourcemap : décrypter un CSS compilé

Outil très utile pour vos développements, le sourcemap permet de garder une trace de vos fichiers Stylus / Sass même si le fichier principal CSS est compilé (et donc tient sur une seule ligne).

Dans ce cas, l’inspecteur n’est pas d’une grande utilité puisque il vous dira que chaque classe se trouve à la ligne 1 de style.css. Pas pratique pour débugguer.

A gauche : mon fichier site.styl, un des fichiers composant au final mon main.css (à droite) compilé.

Le sourcemap est un fichier compris par les navigateurs qui permet de conserver une relation avec les fichiers originaux.

Du coup dans le navigateur on obtient ceci, et malgré un fichier main.css compressé :

Ma classe .teaser__button est initialement présentée dans site.styl, à la ligne 40.

Mettre en place Gulp dans vos themes

Eh bien allez, il n’y a plus qu’à ! La première installation est un peu plus longue, mais à l’avenir ce sera super facile.

Installation préalable de Node

Avant de pouvoir utiliser Gulp dans votre projet, il va vous falloir Node. Node c’est un serveur en Javascript (quelle idée !) qui peut-être aussi installé sur votre machine pour surveiller des dossiers et exécuter des tâches.

Installer Node

Node dispose d’un installeur, pour Windows ou Mac, donc rien de compliqué de ce côté là !

Installation de Gulp CLI

Pour pouvoir lancer les commandes « gulp » dans votre utilitaire de ligne de commande, il faut préalablement installer Gulp de manière globale sur votre ordinateur.

Pour cela lancez la commande npm install –global gulp-cli depuis n’importe quel dossier dans votre CLI.

A l’avenir vous n’aurez pas besoin de relancer cette commande.

Installer les modules NPM

Nous allons maintenant installer les composants nécessaires dans notre dossier de thème. C’est là qu’intervient NPM : C’est un gestionnaire de paquets pour Javascript. Imaginez que c’est un peu comme les plugins pour WordPress, sauf que là on va aller les chercher en ligne de commande.

Rendez-vous dans votre dossier de thème avec la commande cd sites/monsite/wp-content/themes/montheme. Ensuite ajoutez les modules désirés :

La mention –save-dev est importante ici, elle permet d’indiquer à NPM que ces paquets ne serviront que pendant la phase de développement du projet. Avec NPM on peut aussi installer des dépendances comme des librairies JS (jQuery, un plugin jQuery) et les appeler de cette manière au lieu de les télécharger manuellement.

Une fois les commandes lancées, cela va générer un fichier package.json.

On remarque que pour chaque paquet, un numéro de version a été ajouté. L’accent circonflexe permet de dire « à partir de telle version (ou supérieure) ».

A l’avenir on pourra d’ailleurs simplement copier / coller ce fichier d’un projet à un autre. Et il vous suffira de simplement lancer la commande npm install , qui ira lire le fichier et chercher les paquets correspondant automatiquement. Idem si vous avez récupéré mon dossier sur Git, comme le package.json existe déjà, il suffit de lancer l’installation.

Et si je veux Sass au lieu de Gulp ?

Ben oui, je sais, je fais parti des 2% de personnes utilisant Stylus. Je trouve que c’est encore plus lisibile et minimaliste que Sass. Mais ne vous inquiétez pas, il suffit de remplacer stylus par sass et gulp-stylus par gulp-sass pour que ça fonctionne.

Vous retrouverez tous les modules sur le site NPM.

Ne pas versionner /nodes_modules !

Attention si vous utilisez Git pour versionner votre projet. Par convention on ignore le dossier nodes_modules car il contient généralement des milliers de fichiers et est donc très long à analyser.

De toutes manières, une commande npm install suffira à un développeur à retélécharger tous les paquets nécessaires (et à jour).

Donc pensez bien à ajouter une ligne contenant /nodes_modules dans votre fichier .gitignore.

La configuration Gulp

Afin de faire fonctionner Gulp, on va avoir besoin de lui fournir un fichier de configuration qui s’appelera gulpfile.js (récupérez celui de mon répo Git).

// Récupération des dépendancesconst gulp = require("gulp")const stylus = require("gulp-stylus")const autoprefixer = require("gulp-autoprefixer")const plumber = require("gulp-plumber")const sourcemaps = require('gulp-sourcemaps')const bs = require("browser-sync").create()// Créer la tâche Browser Syncgulp.task("browser-sync", function() { bs.init({ proxy: "gulp.local", // Pensez à mettre votre URL ici ghostMode: false, open: false, notify: false })})// Créer la tâche de compilation Stylusgulp.task("stylus", function() { return gulp .src("./stylus/main.styl") // Fichier maitre .pipe(plumber()) .pipe(sourcemaps.init()) // Création du sourcemaps .pipe( stylus({ compress: true // Activer la compression du fichier }) ) .pipe(autoprefixer({ browsers: ["last 2 versions"] })) // Auto préxifer pour la rétrocompatibilité .pipe(sourcemaps.write('.')) .pipe(gulp.dest("./css")) // écriture dans le dossier /css .pipe(bs.reload({ stream: true })) // Recharger le navigateur})// Création de la tâche principale de surveillancegulp.task("watch", ["browser-sync"], function() { gulp.watch("./stylus/**/*.styl", ["stylus"]) // Lorsqu'un fichier .styl est modifié, on lance la tâche stylus gulp.watch("./*.php").on("change", bs.reload) // Rechargement du navigateur lors de la modification d'un fichier PHP gulp.watch("./*.js").on("change", bs.reload) // Idem pour un fichier JS gulp.watch("./views/**/*.twig").on("change", bs.reload)})

// Récupération des dépendancesconst gulp = require("gulp")const stylus = require("gulp-stylus")const autoprefixer = require("gulp-autoprefixer")const plumber = require("gulp-plumber")const sourcemaps = require('gulp-sourcemaps')const bs = require("browser-sync").create()// Créer la tâche Browser Syncgulp.task("browser-sync", function() { bs.init({ proxy: "gulp.local", // Pensez à mettre votre URL ici ghostMode: false, open: false, notify: false })})// Créer la tâche de compilation Stylusgulp.task("stylus", function() { return gulp .src("./stylus/main.styl") // Fichier maitre .pipe(plumber()) .pipe(sourcemaps.init()) // Création du sourcemaps .pipe( stylus({ compress: true // Activer la compression du fichier }) ) .pipe(autoprefixer({ browsers: ["last 2 versions"] })) // Auto préxifer pour la rétrocompatibilité .pipe(sourcemaps.write('.')) .pipe(gulp.dest("./css")) // écriture dans le dossier /css .pipe(bs.reload({ stream: true })) // Recharger le navigateur})// Création de la tâche principale de surveillancegulp.task("watch", ["browser-sync"], function() { gulp.watch("./stylus/**/*.styl", ["stylus"]) // Lorsqu'un fichier .styl est modifié, on lance la tâche stylus gulp.watch("./*.php").on("change", bs.reload) // Rechargement du navigateur lors de la modification d'un fichier PHP gulp.watch("./*.js").on("change", bs.reload) // Idem pour un fichier JS gulp.watch("./views/**/*.twig").on("change", bs.reload)})