Nous mettrons à jour notre Politique de confidentialité prochainement. En voici un aperçu.

HTML5 : Optimisation des flux de production

Utiliser LESS

Testez gratuitement nos 1341 formations

pendant 10 jours !

Tester maintenant Afficher tous les abonnements
À la différence de Sass, LESS est compilé par le navigateur. Ainsi, assimilez deux méthodes. L'une permet d'utiliser une librairie JavaScript côté client, l'autre, une classe PHP côté serveur.
07:07

Transcription

Voyons maintenant du côté de l’alternative à sass, qui est less. Voyons comment on va pouvoir l’utiliser et comment on va pouvoir monter en puissance en utilisant less. Alors premièrement, à la différence de sass, c’est que less peut s’exécuter du côté du navigateur. Donc ici, on va pouvoir télécharger une libraire Less.js, et l’utiliser dans notre fichier html en demandant donc en gros au navigateur client de générer le css pour nous. Sur cela, il y a plusieurs façons de l’utiliser, soit on va utiliser directement la source code, on va le récupérer, on le mettra dans notre serveur et on liera notre page html vers ce fichier javaScript, soit on va récupérer une branche depuis le serveur github, on va faire un clone, on verra ça également plus tard, comment on peut cloner des projets depuis github, soit on va utiliser avec Bower, on verra également Bower plus tard, soit on va utiliser un CDN, et ce CDN, on va le récupérer directement ici, avec le lien ad hoc, soit on va directement aller également sur cdnjs, et puis lui dire : « je voudrais ici, plutôt une version minifiée, mais en utilisant le ScriptTag, directement avec l’intégrité qui va bien. Alors, pour pouvoir mettre ça en expérimentation, ce que je vous propose, c’est de partir sur un projet, un projet client et un projet serveur, ici, qui utilise tous les deux un fichier less, avec un import d’une variable, pour vraiment fonctionner avec du less et utiliser une variable. Alors, les fichiers less ont peu d’importance en soi, ce qui va nous intéresser le plus, ce sont à la fois les fichiers clients et fichiers serveurs dans lesquels on va pouvoir mettre less en avant. Alors, commençons par la partie client. Ici, on a une page html classique, on va utiliser less donc, pour cela, on va commencer par faire un link, et ce lien, on va le faire non pas vers un fichier css, mais on va venir le faire vers un fichier less, ici, le fichier 1.less. Petit souci qu’on va avoir, c’est que si on lui dit à notre navigateur que ceci est une feuille de style stylesheet classique, il va essayer de l’interpréter, donc on va lui rajouter ici, un less. Voilà, et ce qu’on peut faire également, c’est venir lui rajouter un type pour lui dire que ce type, en fait, c’est du texte css, il n’y a pas de souci là-dessus. Ensuite, seconde cerise qu’on va faire, c’est : on va coller maintenant notre cdn qu’on est allé copier tout à l’heure dans cdnjs, avec la partie integrity, et crossorigin= "anonymous", on verra ça plus tard dans une étape dédiée, de façon à pouvoir l’utiliser. Et là maintenant, il suffit d’enregistrer cet élément-là et en étant en mode En direct ici, on va voir directement tout se passer, c'est-à-dire : on a bien nos feuilles de styles css qui se sont appliquées directement à cet élément-là. On va pouvoir ajouter quelques petits paramètres de plus, ici tout simplement, en venant indiquer des options, ce qui est bien sur le github ici : on a accès à l’intégralité des options que l’on va pouvoir utiliser en disant l’environnement, si on est en asynchrone, en synchrone, etc. Par contre, ce qui est important, c’est que toutes ces options ici doivent être placées avant le chargement du fichier JavaScript, less.js. Et donc ici, je vous invite à venir regarder par défaut toutes les propriétés que vous allez pouvoir avoir dans ce paramètre d’options interprétées par le navigateur côté client. Alors encore une fois, pensez à venir coller toutes ces options ici, directement dans cet objet less ici, placé en amont du fichier JavaScript que vous avez téléchargé. Côté php, c’est on va dire à peu près la même chose, sauf que le serveur va générer l’intégralité du css avant de l’envoyer à la partie client. Alors là, il vous faut télécharger directement le fichier php sur votre serveur, pas moyen d’utiliser un cdn. Et vous allez, pour ça, utiliser directement un include ou un require vers le fichier que vous avez récupéré, ici less.inc.php qui a été récupéré, un include. Donc cette fois-ci, le fichier de lien, on ne va pas le faire vers un fichier less, parce qu’il va être compilé côté serveur, on va le faire vers un fichier qui sera généré donc vers un fichier css. Ce fichier css, bien sûr si vous regardez ici, il n’existe pas puisqu’il est généré par le serveur. Alors, on va commencer par le commencement ici, et on va venir, vous voyez bien l’extension php, exécuter un script php. Rassurez-vous, si vous ne faites pas de php, c’est pas quelque chose de bien violent, c’est assez succinct même, on va dire. Et puis vous trouverez toutes les sources sur le serveur directement de less.inc.php. Donc ici, ce qu’on va demander, c’est on va dire : « tu vas récupérer ce fichier less script ici, .inc.php, donc en gros, je le rappelle, pensez au « ; » juste en fin d’instruction. Je le rappelle encore une fois, c’est vraiment ce fichier ici, que l’on vient récupérer, qui est à la racine du serveur. Donc si vous le placez dans une autre arborescence par rapport à votre serveur, pensez à modifier le chemin d’accès, ici, à ce niveau-là. On va créer une variable less ici, $less, une variable php. Et on va dire que c’est un nouvel objet, new lessc. On va créer une instance, en gros, de cette classe qu’on est venue charger ici, dans ce fichier d’include. Et une fois que cela est terminé, on va pouvoir demander à ce pointeur less de pouvoir exécuter une fonction interne, et là on va utiliser checkedCompile, c'est-à-dire qu’on pourrait utiliser plusieurs fonctions, mais ici on va utiliser une fonction qui va être de dire : « vérifie cette compilation et compile-la. » Donc ici, on va compiler quel fichier ? Ce fichier, si je le regarde ici, dans mon arborescence qui est le fichier 05-2.less, utilisé pour ce deuxième exemple, donc côté serveur et non pas côté client ici. Et ici, je vais lui dire : « tu vas me le compiler s'il te plaît, vers ce fichier css que je souhaiterai utiliser. » Et ici, je vais pouvoir simplement placer cette instruction-là, ce que je rajoute ici, c’est le « ; », pas un « : », un point-virgule, et si je passe en mode En direct, théoriquement je devrais également l’exécuter parce que je vais passer en localhost. Alors, faites bien attention, placez-vous sur un serveur http, ne testez pas avec un simple file:, quelque chose dans votre navigateur. Pensez à checker depuis un localhost. Alors, regardez ici. Si on ouvre depuis le navigateur file, et on va chercher le fichier php, on lit le fichier php, il n’est pas exécuté puisqu’il n’a pas du tout de compilateur. Par contre, si je viens le lire depuis le localhost, ici, on a un serveur d’application php qui est lu, puisqu’on est sur un serveur web, et là à ce moment-là, le fichier est interprété et donc généré. Donc si je regarde maintenant côté serveur, on a bien le fichier css qui a été généré, donc si je le supprime ici, je le supprime, voilà. Oui, bien sûr il ne se passe rien parce que la page n’est pas rechargée, mais regardez ici, je recharge ma page, je rebascule, la page a été rechargée, je la recharge encore une fois, ici, si je rouvre mon petit folder, ici, on s’aperçoit que le fichier css a été régénéré puisque c’est le php qui le fabrique à la volée.

HTML5 : Optimisation des flux de production

Optimisez vos flux de production lors de vos développements en HTML5. Explorez les méthodes et les éléments essentiels à la mise en place de processus automatisés.

5h29 (62 vidéos)
Aucun commentaire n´est disponible actuellement
 
Spécial abonnés
Date de parution :26 déc. 2016

Votre formation est disponible en ligne avec option de téléchargement. Bonne nouvelle : vous ne devez pas choisir entre les deux. Dès que vous achetez une formation, vous disposez des deux options de consultation !

Le téléchargement vous permet de consulter la formation hors ligne et offre une interface plus conviviale. Si vous travaillez sur différents ordinateurs ou que vous ne voulez pas regarder la formation en une seule fois, connectez-vous sur cette page pour consulter en ligne les vidéos de la formation. Nous vous souhaitons un excellent apprentissage avec cette formation vidéo.

N'hésitez pas à nous contacter si vous avez des questions !