Découvrir LESS

Précompiler avec des outils graphiques

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Découvrez quelques outils graphiques vous permettant de compiler votre code CSS. Examinez également le fonctionnement de l'un de ces outils.

Transcription

Après avoir parlé brièvement de la compilation côté serveur, et puis de la compilation côté client, eh bien je vous propose dans cette vidéo de démarrer l’exploration de la pré-compilation. Rappelez-vous la pré-compilation, il s’agit tout simplement de compiler vous-même vos fichiers less en fichiers css avant donc de publier le site sur un serveur. Alors on a pleins de façons de le faire. L’une des façons les plus populaires, c’est d’utiliser des petits logiciels avec des interfaces graphiques donc qui vont vous permettre de réaliser cette compilation de manière très très simple. Alors, il y a tout pleins de logiciels qui vous permettent de faire ça. Certains sont gratuits, d’autres sont payants. Je vais vous en montrer quelques-uns mais il y en a vraiment beaucoup d’autres. Il suffit de faire une petite recherche google. Alors je suis ici sur le site de WinLess, winless.org. WinLess est l’un de ces logiciels. Comme son nom l’indique, il n’est disponible que sur Windows. Il vous permet sous la plateforme Windows de compiler vos fichiers less en fichiers css. Une autre application très populaire, c’est Koala. Koala est disponible pour pleins de systèmes d’exploitation, donc Windows, Mac, et puis pleins de versions de Linux également. Et vous pourrez donc télécharger ce petit utilitaire sur votre ordinateur pour réaliser cette compilation. Il y a également Crunch. Alors, Crunch n’est pas uniquement une application qui vous permet de compiler vos codes less en codes css, mais c’est également un éditeur de codes less. Alors, si vous allez dans la partie Download ici de ce site, vous allez voir que Crunch existe également pour Mac, Windows, et plusieurs versions de Linux. Alors une autre alternative très populaire c’est SimpLESS. Comme son nom l’indique c’est un logiciel diaboliquement simple, vous allez voir, qui est disponible pour Mac et pour Windows. Alors j’ai téléchargé SimpLESS ici sur mon ordinateur. Donc je vais vous montrer à quoi ça ressemble. Vous voyez, quand j’ouvre SimpLESS, eh bien, c’est une toute simple interface ici. Et pour démarrer mon travail avec SimpLESS, eh bien, je dois tout simplement aller chercher le dossier qui contient mon projet, donc le dossier racine de mon site, et venir le glisser ici. Donc je vais me rendre au niveau de mon Finder ou de l’explorateur Windows si vous êtes sur Windows. Dans les exercices associés à cette formation, je vais tout simplement prendre le site avec lequel je suis en train de travailler, et venir le glisser ici sur l’interface de SimpLESS. Alors qu’est ce qui va se passer au niveau de SimpLESS ? Eh bien vous allez voir que SimpLESS va analyser le dossier que je lui ai donné et va repérer dans ce dossier tous les fichiers less. Vous les voyez ici. Alors moi je connais mon application et je sais que finalement le seul fichier que je dois compiler c’est styles.less. Alors regardez, il y a un +6 ici, donc SimpLESS s’est déjà rendu compte que ce fichier en fait en importait d’autres. Regardez quand je passe ma souris ici, vous allez voir dans cette petite bulle voilà, les différents fichiers less qui sont liés ici à styles.less. Donc SimpLESS s’est déjà rendu compte de tout ça. Donc je vais tout simplement cliquer ici sur la petite croix des autres fichiers pour les retirer de SimpLESS. Je n’ai pas envie que SimpLESS les compile, voilà. Et donc, il ne reste ici que styles.less. Alors vous voyez que styles.less se trouve dans le dossier less de mon site. Ça s’appelle styles.less et vous voyez juste en dessous que SimpLESS, par défaut, va générer le fichier styles.css qui correspond au même endroit. Alors ça, ça ne m’intéresse pas trop. Donc je vais cliquer ici sur le petit bouton du dossier, voilà. Je vais me rendre dans mon site et je vais lui dire : « non non SimpLESS, ne compile pas ceci dans le dossier less, mais compile moi ça dans le dossier css de mon site. » Voilà, je sauvegarde ceci. Regardez maintenant, je vais prendre un fichier qui se trouve dans le dossier less et qui s’appelle styles.less et je vais le compiler en un fichier styles.css qui se trouvera dans le dossier css de mon site. Vous voyez que pour le moment, ce fichier n’a jamais été compilé : never compiled. Et oui, SimpLESS n’existe qu’en anglais et vous voyez que c’est de l’anglais très simple de nouveau. Je vais cliquer sur cette petite icône ici et vous voyez qu'une première compilation de mon fichier a été réalisée de manière successful, avec succès. Je vais retourner maintenant dans mon éditeur de code pour vous montrer ici dans le dossier css eh bien, le fichier styles.css qui a été généré, donc par SimpLESS. Alors si je vais voir ce fichier, vous voyez que c’est un fichier donc css qui a été généré et vous voyez que SimpLESS a également minifié ce fichier, c'est-à-dire qu’il a retiré tous les espaces et tous les sauts de ligne pour faire un fichier le plus petit possible. Alors, qu’est-ce qu’il me reste à faire ? Eh bien je vais simplement retourner ici au niveau de ma page html. Je vais lier donc ma page html au fichier styles.css qui a été généré par SimpLESS. J’ai besoin d’une nouvelle balise link. Vous connaissez très certainement ceci et je vais rechercher dans le dossier css, styles.css, donc comme ceci. Alors je sauvegarde mon fichier html, je reviens au niveau de mon navigateur, et je vais aller inspecter ma page. Vous voyez que quand je rafraichis ma page, eh bien j’ai effectivement un fichier css qui a été chargé ici, un fichier css qui a été donc généré par SimpLESS. Alors, je vais retourner dans SimpLESS pour vous montrer d’autres petites options. D’abord j’ai ici une option qui s’appelle minify. Vous voyez que cette option est activée pour le moment. Je vais la désactiver comme ceci et rafraichir de nouveau. Voilà, pour forcer une compilation. Donc maintenant, quand je reviens dans mon éditeur, eh bien, vous allez voir : styles.css a été compilé de nouveau, mais cette fois-ci il n’est plus minifié. Ce qui me permet de voir exactement comment donc SimpLESS a interprété mon code less et donc de contrôler tout ce qui se passe. Donc quand vous êtes en phase de développement je vous invite à ne pas minifier vos fichiers comme ceci. Et puis quand vos fichiers seront finis, et que vous êtes prêt à publier votre site sur internet, eh bien la dernière compilation, vous pouvez bien évidement la minifier. Ce sera autant de place de gagnée donc, sur le serveur et au niveau du trafic vers les personnes qui viennent visiter votre site. Alors autre chose intéressante, vous vous rappelez que SimpLESS s’est rendu compte que mon fichier styles.less était lié à d’autres fichiers less. Donc je vais apporter une modification ici par exemple à variables.less. Donc je vais de nouveau ici changer la couleur. Voilà, Edition rapide. Allons voir ici dans les rouges, quelque chose comme ça. Je ne vais pas reprendre le même orange que tout à l’heure, je vais prendre autre chose, voilà. Je sauvegarde ici mon fichier variables.less et puis je vais retourner dans SimpLESS. Alors regardez, il y a une petite icône SimpLESS ici qui se trouve au dessus quand SimpLESS est actif. Donc je vais cliquer dessus. Vous voyez que le fichier a été compilé automatiquement a few seconds ago, donc il y a quelques secondes. Ça veut dire tout simplement que SimpLESS me surveille et chaque fois qu’il détecte un changement dans mon application less, il va automatiquement recompiler le fichier. Alors on va aller voir, vous voyez ici le code couleur c’est 98122b. Si je reviens au niveau de ma feuille de style eh bien vous allez voir au niveau du header, voilà ici 98122b. Donc le fichier a bel et bien été recompilé et puis si je retourne dans mon navigateur, et que je rafraichis mon fichier, eh bien voilà donc ma nouvelle feuille de style qui a donc été recompilée avec la nouvelle couleur. Voici donc comment on utilise SimpLESS. Alors ça s’utilise de manière presque pareille avec les autres applications, donc Koala, Crunch, etc. Ils s’utilisent tous de manière un peu différente, mais tous de manière plus ou moins semblable quand même. Donc vous retrouverez très certainement votre chemin dans ces applications. Il y a quand même un gros désavantage à utiliser ce genre d’applications. Je vais retourner ici dans SimpLESS. Vous voyez que SimpLESS est en version 1.4 pour le moment, et SimpLESS n’a plus été mis à jour depuis très très longtemps. Il utilise toujours la version 1.3.0 de less. Nous sommes aujourd’hui dans la version 2.7.1. Autrement dit, nous avons ici une très vieille version de less qui est utilisée par SimpLESS pour compiler notre code et c’est le cas de beaucoup de ces applications graphiques qui ne sont pas mises à jour de manière régulière et qui utilisent des versions très anciennes parfois de la bibliothèque SimpLESS pour réaliser cette compilation. Donc ce sont des outils très facile d’utilisation mais dans le cadre de notre formation nous avons envie d’utiliser des versions plus récentes de less, et donc nous n’allons pas utiliser ces options. Maintenant, j’avais quand même envie de vous les montrer parce que ce sont des options très populaires et qui vont satisfaire à bien des besoins.

Découvrir LESS

Étendez le langage CSS avec LESS. Exploitez les fonctions d'automatisation, comme les variables, les fonctions, et la possibilité d'écrire du code de manière imbriquée.

2h59 (30 vidéos)
Aucun commentaire n´est disponible actuellement
Spécial abonnés
Date de parution :21 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 !