 Des thèmes avec WordPress et le CSS et le HTML, surtout le CSS a évolué, on a eu des pré-processeurs, on a eu des outils et du coup pour piloter tous ces outils, pour simplifier le développement, il y a des choses comme Gulp qui sont apparues. J'ai choisi Gulp aujourd'hui parce qu'il est très simple à configurer, c'est copier collé pour chacun de vos projets et ça ira beaucoup plus vite. Je m'appelle Maxime Bernard-Jacquier, je suis entrepreneur, développeur WordPress. J'avais une agence il y a longtemps et aujourd'hui je fais mes projets perso. On a longtemps eu la question de se dire quand je fais un thème pour un client qu'on commence de zéro, est-ce qu'on ne peut pas aller beaucoup plus vite et gagner du temps sur le démarrage de projets. Aujourd'hui je suis entrepreneur donc j'ai des projets comme WPchef, Cape Town WordPress et Delypress. Alors Gulp c'est un outil de build, comme l'on l'appelle, c'est un outil qui va transformer vos fichiers de JavaScript et les CSS pour les compiler, les rendre plus petits et surtout si vous utilisez des pré-processeurs comme Sass, Sass ou Stylus, qui sait qu'ils utilisent, on va faire un petit sass en sondage à main levée, qui sait qu'ils utilisent Sass aujourd'hui, les S, moins et Stylus, je vous montrerai pourquoi j'aime bien Stylus mais en gros on en reste toute la ponctuation, les points virgul, les accolades, etc. Donc c'est pareil que les autres et je trouve que c'est encore plus simple au niveau de la lecture mais il n'y a que 2% des gens qui l'utilisent, donc il n'y a pas de marché, c'est pas terrible. Donc effectivement quand vous avez ces fichiers là, il va falloir les compiler quand vous êtes dans un projet. Donc on va voir justement quelles sont les différentes solutions. Moi l'outil que je vais vous montrer, Gulp, il va vous permettre de faire plusieurs choses, c'est ce qui est dans le bloc bleu, compiler un pré-processeur CSS, donc Sass ou Sass, minification des fichiers JSCSS, donc ça les compresse pour qu'ils prennent moins de place, ça enlève les retours à la ligne, ça enlève les espaces, les commentaires, etc. Là où ça va plus loin et que c'est intéressant, c'est que ça va rafraîchir automatiquement votre page web quand vous allez enregistrer votre fichier. Vous travaillez sur votre fichier, vous enregistrez, votre navigateur recharge la page. Alors si c'est du JavaScript, il recharge la page, si c'est du CSS, il va juste injecter les changements. Du coup c'est ultra rapide, c'est instantané. C'est comme si on modifiait en fait directement dans l'inspecteur, sauf que cette fois c'est persistant. On a aussi la navigation synchronisée entre les appareils, c'est très pratique quand vous faites du responsive web design et que vous voulez tester le site sur un iPad, un iPhone et puis un ordinateur. Donc quand vous faites quelque chose sur un ordi, ça fait la même chose sur les autres. Comme ça vous pouvez scroller, cliquer sur un formulaire et voir si tout va bien. Et puis ça rajoute les préfics CSS pour la rétro-compatibilité avec quand vous utilisez une nouvelle propriété, en fait, vous n'avez pas besoin de mettre les préfics CSS qui vont derrière, ça le fait tout seul pour vous. Et des choses comme JSClean qui permettent de vérifier votre JavaScript, il est correcte au niveau du code, il n'y a pas d'erreur, il n'y a pas de mauvaise syntaxe ou quoi que ce soit. Je l'utilise surtout pour les cinq premiers points. Donc moi, l'avantage préféré, c'est quand je développais mon site, j'ai un iPad, un iPhone, un MacBook et puis un Mac et du coup, il y avait quatre résolutions différentes et quand je mets à jour sur mon code, automatiquement, ça mettait à jour tous les écrans en même temps. La navigation synchronisée, c'est quand je scroll, tout le monde scroll en même temps. Ça, c'est vraiment super quoi. On gagne du coup du temps, on pourrait synchroniser 50 à pas et il y a des agences, ils ont acheté tous les téléphones possibles, ils ont mis en ligne les uns sous les autres et du coup, ils lui permettent de contrôler comme ça que tous leurs sites sont bien compatibles avec leurs responsibles. Alors, il y en a plein des solutions comme ça. Moi, j'ai choisi Gulp avant que j'utilisais Brunch. Il y a Yarn, il y a Grunt, il y a Webpack aussi aujourd'hui, un peu plus usine à gaz. D'ailleurs, Kristen, ce matin, a présenté Webpack, je sais pas si il y a quelqu'un qui était à la conf. Donc voilà, c'est un petit peu le même principe en fait. Moi, c'est la simplicité de configuration de Gulp qui m'a plu. Si vous êtes comme moi avant allergique à la ligne de commande, vous allez des alternatives sous forme de logiciels qui vous empêchent, qui vous évite d'avoir installé quoi que ce soit. Sur Mac, il y a CodeKit et sur windows.prose.io, donc ce, c'est une capture pré-prose justement. Ça vous permet en fait de vous faire glisser votre projet et vous allez configurer avec une interface visuelle. Je veux compiler mes fichiers, je veux utiliser ça, je veux que ça aide en tel dossier quand des gens enregistrent, etc., etc. Donc c'est plutôt pas mal. Le seul truc que je reproche à ces logiciels, c'est que leur système de compilation est assez long. Généralement, CodeKit, il prenait jusqu'à une seconde pour réenregistrer le fichier et mettre à jour le navigateur, alors qu'en ligne de commande pure, ça prend 100 ms maximum. Il y a des gains de vitesse qui sont à 10 fois plus rapide. Donc on va avoir besoin d'un outil de ligne de commande pour faire la manip. Il y a e-term sur Mac qui est un des plus connus. J'aime bien e-perterm, moi, c'est l'icône qui est là-bas. Il est plutôt un peu plus sexy, autant que peut-être une ligne de commande, bien sûr, et sur Windows il y a le PowerShell. Donc à la base, j'aime pas la ligne de commande parce que c'est un peu geek, quoi. Je veux dire, quand on peut faire des clics ou il y a de taper des textes, je préfère. Là, voilà, c'est super simple, donc il n'y aura pas de soucis à ce niveau-là. Ce qu'on va avoir besoin, c'est d'installer Node et NPM, le gestionnaire de plaquiers de JavaScript pour installer des petites dépendances. Là aussi encore une fois, c'est très simple. Node, c'est un logiciel Windows ou Mac, vous l'installez et ça le fait. Node, c'est un serveur JavaScript. Donc JavaScript, normalement, ça se passe dans le navigateur. Là, simplement, depuis que Node est sorti, ça permet de faire un serveur JavaScript pour plein de choses. Il y en a qui font un vrai serveur donné en JavaScript. Nous, c'est simplement un serveur local sur notre ordinateur pour lancer des commandes, comme compiler les fichiers, recharger le navigateur, etc. Donc tout ce qui existe aujourd'hui comme librairie en JavaScript se retrouve sur NPM. Il y a plus de 470 000 paquiers disponibles. Et donc voilà, tout ce qu'il y a besoin de savoir pour le moment là-dessus, on n'a pas trop s'étaler. Donc pour chaque nouveau projet, ce que je fais, en fait, j'installe les paquiers donc j'ai besoin grâce à la commande NPM. Ça va tout s'installer dans un dossier. On va regarder ça après, Node module. Notamment, je lui dis que je veux le compilateur de SAS ou de Stilus pour ma part. Je veux le library load, le fait que le navigateur recharge. Enfin, j'ai 3 ou 4 modules que je charge. Et après, dans votre projet à la racine, vous allez avoir un gulp file qui va vous permettre en quelques lignes de JavaScript de dire que quand il y a tel ou tel type de fichier qui a été modifié, par exemple, on fichier SAS, je veux que ça recompile mon fichier CSS. Voilà. C'est comme ça qu'on indique un petit peu toutes les tâches. Donc ça, on va le regarder en vrai juste après. Je vous le remettrai dans l'article que je publierai, et du coup, j'ai fait un petit repos sur GitHub où il y a un thème très simple de base dans lequel j'ai mis toute la configuration qui est prête à l'emploi de gulp. Je vous remets après, je vais vous montrer le site. Donc, qu'est-ce qui change, en fait, dans un projet? Pour moi, la racine du projet, c'est le thème. Vous êtes en train de faire un thème WordPress, donc ça se passe dans le WP Content, thème, le nom de votre thème. Et voilà. Il y a 3 fichiers qui ont été rajoutés. Il y a le package.json, c'est-à-dire NTM. C'est ça qu'il faut installer. Le goalpy, c'est la configuration, quand le serveur est lancé pour dire que tel fichier change, qu'on pile tel fichier. Et quand vous avez installé vos dépendances, il va avoir un dossier Node-module qui va être créé, dans lequel il va installer tout ce qu'il a besoin pour tourner. Ce dossier, si vous faites du versionnement, il ne faut pas le versionner, parce qu'il y a énormément de sous-dossiers. Il est vite, très, très lourd. En fait, on l'ignore dans les projets. Je vous montrerai la commande après. votre ordinateur. La première fois en fait il suffit de taper npm install et le nom du module qu'on veut. Donc bon ça c'est, on se renseigne un petit peu pour voir quelles sont les configurations qu'on veut. J'ai ces cinq modules là que je veux. Et à la fin il y a un petit paramètre, Save Dave, ça veut dire que c'est des modules qui sont là que pour le développement. Ils ne seront pas là en production. Google peut en aller plus loin et de balancer des scripts quand vous allez compiler vos scripts à vous. Il va pouvoir rajouter des librairies. Vous vous rappelez qu'en pour faisait du jQuery, on en fait peut-être toujours encore un peu, on allait chercher des librairies à la main en fait. On veut chercher un truc de slider. On charge à la main Javascript et le CSS. A la base le système de gestion de paquet de npm c'est pour faire ça, pour l'automatiser pour l'intégrer dans vos projets sans avoir à aller le chercher à la main. Une fois que vous avez installé vos premiers modules, ça a créé un fichier donc le package.json avec les Dev Dépendances, ce qui va être installé en Dev, donc Browser Sync, la synchronisation du navigateur, enfin le rechargement du navigateur, Gulp, le petit serveur qui tourne et qui surveille votre projet. L'auto-préfixeur pour ajouter les préfixes CSS. Stylus pour compiler mes fichiers Stylus en CSS. Stylus, la bibliothèque générale et Gulp Stylus, c'est la spéciale pour Gulp. Il faut les deux pour que ça fonctionne. C'est pareil pour SAS. Vous avez Gulp SAS et SAS tout court. Et ça c'est le numéro de version. Le petit chapeau c'est pour dire tu me prendras à part la version 3.9.1. Vous êtes plusieurs développeurs, vous avez configuré ce fichier, il est versionné. Le développeur sur GitHub récupère le dossier, il fera npm install qui va aller du coup chercher dans le package.json toutes ses dépendances et les installer automatiquement pour que le projet soit opérationnel. Ça c'est du coup aujourd'hui dans le développement JavaScript, on se retrouve en fait souvent tout le monde commence à faire ça en fait pour gérer tous les dépendances pour éviter d'avoir intégré tous ces fichiers dans votre projet. Le fichier Gulp file, je passe assez rapidement, je passe assez rapidement, sinon il n'y a pas le temps. Grosso modo, en gros je vais charger les modules qui étaient dans le Gulp Stylus Autopropfixeur. Je vais direct en bas, je crée une tâche qui s'appelle Watch et qui me permet de lancer Browser Sync et je vais dire voilà quand je vais faire moi Gulp Watch dans mon nom ligne de commande, ça va lancer ça et là Gulp se lance, il va surveiller mon dossier de projet. Dès que je vais changer un fichier, il est listé à l'intérieur ici, il va automatiquement lancer la tâche correspondante. Par exemple je lui ai dit que si jamais tu me vois modifier un fichier Stylus, tu vas lancer la tâche qui s'appelle Stylus qui est un peu plus haut et si jamais je change du PHP, du JavaScript ou Twig, c'est un système de template, là dans ces cas-là je vais faire un BS Reload et ça c'est le Browser Sync justement. Browser Sync va me permettre de recharger la page. Donc n'importe quel fichier dans mon thème, si je le modifie, il recharge la page. Donc je modifie le PHP, il recharge la page parce que potentiellement il va changer. Si c'est un Stylus, il doit faire la compilation d'abord donc j'ai créé une autre tâche qui s'appelle Stylus ici et vous verrez en fait quand vous êtes sur NTM, il y a la documentation, je n'ai pas inventé ça, j'ai copié-collé des bouts de config. C'est assez marrant, ce n'est pas une config en JSON ou quoi, c'est vraiment du JavaScript en fait et là quand Gull pour Stylus, il dit voilà, le fichier mène pour un Stylus qui se trouve dans le dossier Stylus. Je vais lui appliquer Stylus donc il sait qu'il va faire la compilation. Dans les paramètres de Stylus, il y a le compresse, je l'ai mis à vrai, ça veut dire que je veux que le fichier quand il est compilé, il est compressé. Une fois qu'il est compressé, je rajoute l'autopréfixeur, je vais préfixer tout le CSS qui est un peu trop moderne et à la fin je vais l'enregistrer dans le dossier cette fois CSS et je vous montrerai dans mon dossier. Et enfin il y a un reload. Donc c'est assez compréhensible en fait. Il fait dans l'ordre de ce qu'il voit, il compile le fichier, il le compresse, il rajoute les préfixes et j'ai rajouté aussi le source map. Vous savez ce que c'est un source map ? C'est mon fichier Stylus, il est compressé. J'étais en fichier Stylus comme ça, ça vous permet de faire plein de fichiers CSS différents. À la fin ils sont compilés en un seul. Et du coup quand vous êtes dans l'inspecteur, c'est marqué dans votre fichier un seul, cette propriété CSS elle est à la ligne 1. Quand il est compressé, en fait, il fait qu'une ligne au fichier. Donc pour vous, pour débugger, c'est très compliqué. Tout est à la ligne 1 donc vous ne vous trouvez pas. Le source map, c'est pour garder en fait un historique de comment c'était avant la compilation. Pour vous dire, en fait, cette classe là, vous l'avez définie dans le fichier qui s'appelait composant.styl à la ligne 57. Et le source map du coup, il est compris par le navigateur, c'est quelque chose de compris par navigateur. Et comme ça, il va vous dire à quel endroit c'était exactement et vous pour débugger, c'est beaucoup plus facile. Je vous montre après. Donc pour lancer guelpes, une fois qu'on a tout ça, il faut aller dans le bon dossier donc cd, challenge directory, vous allez dans votre dossier de votre thème. Et après simplement, je lance guelpe watch et guelpe watch va chercher le fichier de config que je vous ai montré juste avant et il va lancer un petit peu toute la surveillance comme ça. Ce qu'il va faire, c'est qu'il va me créer un proxy. Donc peu importe l'url de votre site actuel, il va vous donner une nouvelle adresse en localhost 2.3000 et c'est celle-là qu'il faudra lancer en fait pour avoir le rechargement automatique. Si vous ne l'avez pas, en fait, c'est lui l'injecte. Donc toutes les URL, même si elles ne sont pas bonnes, il va les changer en localhost à la volée. Donc tout va marcher. Vos images seront bien chargées, etc. Et du coup, s'il y a quelqu'un d'autre sur le réseau qui veut accéder à la même sur le même site, il y aura l'adresse du réseau le 192.168. quelque chose et puis du coup, il pourra accéder aussi aux trucs. On ne pourra pas tester du coup malheureusement parce qu'il faudrait connecter au même réseau wifi. Et là après, ça marche tout seul. Vous avez même une interface sur le port 3001 qui vous permet de faire des configurations qui vous permettent de faire des petites compilations pour voir quels ordinateurs sont connectés et vous allez pouvoir aussi rajouter des petites options. Je vous les montre après. Voilà. A gauche, c'est du... On ne voit pas terrible, je zoomerai sur mon code. A gauche, c'est mon code qui est en stylus et à droite, c'est le code qui est compilé en CSS. Vous voyez, c'est un espèce de blog invisible, mais il prend moins de place. Pensez du coup, comme je disais, à ignorer le dossier de notre module. Dans tous les projets, c'est une bonne pratique. Donc, il suffit d'avoir un fichier point guide ignore à la racine de votre thème et d'ignorer le dossier slash notre module. Des mots, en espérant que ça ne prend pas. Donc, si je reprends mon thème, je suis dans le dossier thème, thème gulp. Si je regarde le package.gislar, je vais désactiver le mode module déjà et je vais le supprimer. J'espère que je n'aurais pas le regretté. Mon package.gislar ressemble à ça. Donc, tout ce que je disais tout à l'heure, j'ai simplement rajouté source map. Donc, voilà. Je vais aller en ligne de commande. Donc, c'est des... Un minute déjà. Mais pourquoi ne marche pas ma ligne de commande ? Ça fait des mots. Attends, je retrouve ma ligne et je ne sais pas si je peux le grossir. C'est bon. Voilà. Là, je suis arrivé dans le dossier et là, je vais faire un NPM install. Donc là, automatiquement, il va aller chercher mon fichier avec les différents modules et il en installe. Vous voyez qu'il en installe pas mal, en fait, à chaque fois au passage. Ça, vous le faites une seule fois en début de projet, en fait. Après, c'est bon, ça fonctionne. Donc, là, je retourne ici. On a bien dossier notre module et regardez un petit peu tout ce qu'il a installé, en fait. C'est... Parce que chaque module installe ses propres dépendances. Il y a, par exemple, une bibliothèque qui s'appelle lodache, qui est plein de petites fonctions qui sont utiles pour ceux qui font du JavaScript. Et toutes ces bibliothèques l'utilisent. Donc, ils chargent aussi lodache, qui va charger un autre truc. C'est un peu comme quand vous faites du linux ou quoi, vous téléchargez des paquets qui ont besoin de dépendance à d'autres paquets. Donc, après, ça se fait tout seul. Ça marche bien. Donc, là, on est plutôt pas mal. Je vais faire, du coup, un gulp watch. Voilà. Et il me dit que je suis opérationnel sur le port 3000. Ok, pas de souci. Donc, là, c'est mon site en mode, bon, c'est l'adresse point local habituel. Je vais, du coup, faire un... Oups, quelle autre 3000. En attendant, je ne sais pas pourquoi, mais en ce moment, mon ordis s'arrame. Pour charger un site en local, c'est juste affreux. Si je regarde mon gulp file, le seul truc que j'ai rajouté par rapport à ce que je m'a montré tout à l'heure, c'est dans Stylus, en fait, je rajoute le source map init et à la fin, un source map.write. Ça, je l'ai pris dans la doc aussi. Ils expliquent qu'il faut le mettre comme ça. En fait, il faut l'encapsuler avant et après qu'il fasse la compilation pour garder les deux versions. Voilà. C'est un fichier qui fait au final 39 lignes et d'un projet à l'autre, je ne change rien. Si la seule chose qu'il faut changer, c'est ici, c'est l'adresse de votre site, l'adresse originale. Donc, moi, gulp point local, comme ça, il sait ce qu'il doit transformer. Gulp point local, il le transforme en localhost. Donc, voilà, je suis sur localhost 3000, ça marche. On va faire un petit changement dans le CSS, quand même, et juste dans browser sync, en fait, ils vous fournissent une interface. Donc, c'est le port 30001, généralement, et ils vous permettent de faire des trucs comme le remote debug et un historique des pages visitées. Voilà. On peut synchroniser la navigation, le scroll, les clics et les submis de formuleurs. Ça, c'est quand vous avez plusieurs ordinateurs connectés au même site. Comme je disais tout à l'heure, si vous scroller sur l'un, ça scrollera sur les autres. Donc, vous pouvez l'activer. C'est juste que c'est un petit peu lourd en termes de synchro sur votre réseau. C'est pour ça qu'ils n'activent pas tout par défaut. Vous pouvez simuler un réseau pourri. Moi, je habite à la campagne. Donc, techniquement, je n'ai même pas besoin de le faire. Le réseau l'est déjà, quoi. Je suis en local, donc non. Et, voilà, aujourd'hui. Là, s'il y avait d'autres ordinateurs connectés, je les verrai. Donc, voilà. Donc, on peut se connecter à Browser Sync de cette manière. Donc là, maintenant, je vais prendre mon petit code. Donc, pour vous montrer Stylis, en fait, j'ai un fichier. J'ai un fichier principal main qui va appeler des autres fichiers. Donc, j'ai le normaliseur de CSS. J'ai les variables d'un côté. J'ai les styles basiques d'un autre côté. Et j'ai du mettre, du coup, le site, voilà. C'est en fait ce que j'aime bien. Regardez, c'est super simple. Il n'y a pas de ponctuation. Il n'y a rien, c'est tout fait avec l'étabulation. Pour les médiacouris, on peut faire des mix-ins. Ça, c'est ma médiacourie, en fait. J'ai des médiacouris pour le desktop, pour les tablettes et les mobiles. Donc, quand on n'est pas à l'inverse sur le desktop. Et je trouve que la visibilité, elle est vraiment super claire, quoi. Et du coup, on se retrouve bien. Donc, sur mon petit bouton, il est tomateau. Tac. Voilà. Donc, si je fais blue. Non. Non, mais non, c'est pas. T'as eu la tu. Ouais, je n'ai presque fini, de toute façon. Putain, ouais, j'ai mis la, c'est la l'écran. Bon, j'ai mis blue. Si normalement, je reviens là, c'est bleu. Bon, par contre, il n'y a pas assez. Allez, on va le faire. On va, on va, on va faire le luxe d'avoir, faire style qu'on a deux écrans comme ça. Voilà. Et du coup, vous voyez qu'au moment où j'enregistre, en fait, ça m'ajoure. Alors, en réalité, ça ne va plus vite. Je ne sais juste pas pourquoi ces derniers jours, mon ordinateur, il n'en a absolument rien à faire. Voilà. C'est passé, c'est passé, c'est passé au rouge. Et du coup, au moins, votre truc, il est bien. Et dernière chose, du coup, tac. Quand je vais regarder avec l'inspecteur, je vais chopper mon bouton. Voilà. Et il me dit que ma classe teaser bouton se trouve dans site.style. Donc, c'est l'extension de cilus, ligne 40. Voilà. Alors qu'en réalité, si je regarde le fichier CSS qui est chargé, là, le fichier CSS qui est chargé, c'est celui-là. Il n'y a pas de ligne 40, c'est, vous voyez que ça s'arrête à ligne 3. C'est grâce au source map qui est aussi un fichier complètement bordélique. Mais du coup, je sais que c'est site.style, ligne 40. Effectivement, c'est bien là. Donc avec ces petits outils, on est, je crois que je vais utiliser, ouais, c'est bon. Avec cet outil, on est vraiment bien parce que c'est inclus dans votre thème. Vous avez juste à démarrer un npm install la première fois, puis après, un gulpwatch. Donc, ça tourne en ligne de commande et après, ça fonctionne tout seul. Donc, vous développez, vous enregistrez, ça met à jour. Vous avez toutes les informations de debug, ça compile les fichiers et ça le fait tout seul. Et du coup, quand vous faites du développement sur mesure de thème, vous gagnez énormément de temps. Voilà. Donc, dernière chose. Je l'ai mis dans mon répertoire. Je vous remettrai la, je vous laisse l'adresse là-haut. Je vous l'écris en gros pour ceux qui veulent la... Bah, c'est pas assez grand. Donc, si vous l'avez, c'est un thème vraiment de base. Il n'y a qu'un seul fichier d'ex.php. C'est simplement pour avoir la config. Le seul chose que vous devez récupérer, vous, en réalité, c'est le package.json et le gulp file.js. Et éventuellement, le Git ignore pour simplement ignorer le node module. Si vous faites du versionnement avec Git. C'est trois fichiers dans votre projet. Vous avez la même configuration que moi et du coup, vous pouvez faire du CSS beaucoup plus rapidement. Je n'ai pas mis JSLint par manque de temps, mais vous pourrez mettre JSLint qui, au passage, à l'enregistrement, il va vérifier que votre JavaScript, il est bien comme il faut. S'il n'est pas, il vous met dans la ligne de commande. Attention, il y a une erreur. Pareil, si vous faites un CSS qui est foiru, il va faire une erreur de compilation. Il va vous le dire ici. Attention. Voilà. Donc, c'est très simple, c'est très léger. Ça s'intègue facilement dans votre thème et puis ça vous permet d'aller plus vite. Et bah de rien.