HTML5 : Optimisation des flux de production

Créer un projet avec Sass

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Puisqu'il faut créer des projets à chaque fois que nécessaire, automatisez quelques étapes sous Windows ou macOS. Obtenez ainsi plus de souplesse en production et gagnez du temps.
11:03

Transcription

Pour compiler nos fichiers sass, on a vu qu’il existait pléthore de petites applications qui vont nous rendre de manière très transparente, ce service. Mais en réalité, si on passe par des lignes de commande, ça va être tout aussi simple, et surtout on va pas se fermer, on va pas se verrouiller, on va garder une latitude complètement ouverte de pouvoir compléter, expérimenter, et aller beaucoup plus loin que ce que nous permettrait le cadre d’une application. Alors, regardez : ici, je vais avoir deux fichiers css, dans ce dossier, à la racine. Le premier, qui fait appel à un partial, ici, pour pouvoir venir récupérer une variable de couleur. Alors, sans rentrer dans sass, puisque c’est pas du tout l’objectif de cette formation, ici, regardons quand même un détail qui est que les fichiers partials utilisent un _ comme préfixe ici, parce qu’en fait, sass va savoir qu’il s’agit d’un partial, et donc va le compiler pour l’utiliser dans la programmation qui est utilisée, mais ne va pas générer de fichiers css, depuis ce fichier. Et puis ici, je n’ai pas besoin de mettre l’extension aussi, ce qui nous laisse l’ouverture complète de pouvoir travailler avec du sass, du scss, ou encore du css directement. Voilà, donc dès l’instant où vous importez un fichier, pas besoin de mettre l’extension, pas besoin de le précéder par le _ du partial, sass va pouvoir retrouver ses petits à ce niveau-là. Alors, pour pouvoir utiliser le compilateur de sass qui est intégré, puisqu’on a utilisé sass tout à l’heure, il suffit d’aller en ligne de commande, de pointer comme on a l’habitude vers le fichier de travail, ici. Et puis, je vais aussi venir copier directement ici, le nom de ce fichier, parce que bien souvent, ça nous évite des erreurs de syntaxe, comme passer des plombes à vouloir débugger. Et ici, donc je vais demander à sass de faire un update de ce fichier, ici, et je vais l’updater, le compiler vers un fichier que j’appellerai styles.css directement. On laisse la magie opérer, on retourne dans le dossier, et on s’aperçoit que sass a fabriqué tout ce dont il avait besoin, c'est-à-dire un dossier .sass-cache qu’il a pointé ici. Pensez à faire un gitignore si vous travaillez avec git, on verra ça par la suite, et ici surtout, là-dedans il y a tout un système de compilation que sass va utiliser pour les partials, pour optimiser son temps de compilation, avec ce qu’il y a. Si maintenant on regarde la génération du fichier css, il suffit d’actualiser ici, voilà. Et si je l’ouvre, on a bien notre variable qui a été remplacée par la valeur qu’on attendait, la valeur qui a été passée dans le partial. Alors, on pourrait s’arrêter là, mais tout à l’heure, je vous ai demandé d’installer compass. Alors compass, c’est controversé, certains sont pour, certains sont contre. Personnellement, j’aime bien pour au moins deux raisons. La première, c’est l’utilisation de la libraire Vertical Rhythm qui est fabuleuse pour pouvoir travailler sur la meilleure lisibilité verticale de nos contenus, mais surtout parce qu’on a des commandes qui vont nous permettre de compléter sass et qui vont être assez sympathiques pour travailler sur nos projets. Alors vous allez me dire : « oui, mais tout un ligne de commande, sass pourrait faire exactement la même chose ». C’est vrai mais je dirais que compass nous propose un petit éditeur ici, et c’est pas mal pour franchir le pas parce que c’est vrai qu’au départ, on est un peu réfractaire au code. Vous voyez ici, on a un outil qui va nous permettre de générer ce code pour nous. Alors, s’agit-il d’un nouveau projet compass ou d’un projet existant ? Et vous voyez qu’en fonction de ce que vous allez opter et choisir, ici, les lignes de commande vont s’écrire et se présenter. Alors, on va dire qu’on va travailler un nouveau projet compass ici, que ce projet, on va l’appeler test ici, qu’on utilisera ou pas les feuilles de style de démarrage, c'est-à-dire les fameuses fiches Internet Explorer, Impression ou Écran. Est-ce qu’on utilise du sass ou du scss ? Et puis enfin, est-ce qu’on utilise l’arborescence proposée par compass, ou est-ce qu’on va utiliser la nôtre ? On va utiliser la nôtre. Ici, on va demander que les feuilles de style soient dans un dossier css, javascript-dir « js » et images, imgs au pluriel, voilà. Et vous voyez que tout s’est généré ici, dans la partie basse. Alors, dans un premier temps, on ne va pas prendre non plus install compass, puisqu’on a déjà installé compass, mais comme je disais donc, dans un premier temps, on va copier cette partie-là, on va retourner auprès de la ligne de commande, on va simplement coller, et on va générer. Et là, la magie va opérer : c’est compass et sass qui vont se débrouiller pour nous fabriquer ce fameux dossier test ici, et dans ce dossier test, on a notre arborescence qui a été préparée avec les fichiers ie, print et screen, qui ont été automatiquement générés et compilés à la volée puisque l’installation a aussi généré cette mécanique-là, et puis également, fabriqué un fichier de configuration rb qu’on a l’habitude d’utiliser si on travaille avec sass. Alors ici, si on actualise et qu’on regarde de près ce fichier de configuration, on s’aperçoit qu’il a utilisé l’arborescence qu’on lui a indiquée, c'est-à-dire css, sass, imgs et js. Alors, on va pouvoir le modifier. Pour modifier ce fichier, on va pouvoir venir taper là-dedans, directement, et puis compass s’adaptera puisqu’à chaque fois, il viendra voir ce fameux fichier de configuration pour pouvoir en tenir compte. Mais on peut, là encore, utiliser la ligne de commande. Alors, je vais nettoyer un peu cette espace. Je vais me déplacer dans le dossier de test puisqu’on est dans une application qui s’appelle test maintenant, et je vais pouvoir utiliser un compass config, lui dire : « voilà, je voudrais configurer différemment », et là, on va pouvoir y aller gaiement avec des diverses options que l’on souhaite. Donc dire que par exemple, le dossier images-dir, je voudrais qu’il s’appelle imageries au pluriel maintenant. Je voudrais que la variable d’environnement, on va dire qu’elle est en development, ici. Et on pourrait dire que le output-style, au singulier, soit expanded. Voilà. Et ici, dès qu’on a terminé cette ligne d’instructions, on valide, et on se retrouve avec la possibilité de le faire, mais il me dit : « mais attention, le fichier config.rb existe déjà. J’aimerais que tu me précises si tu es vraiment sûr de vouloir le faire. » Alors, ce qu’on va dire, c’est qu’on va faire un force ici. Et on va lancer l’instruction, mais en forçant cette écriture. Et là, on me dit : « attention, j’ai bien réécrit par-dessus config.rb », et c’est vrai que si j’actualise ici et que je visualise, on s’aperçoit qu’on est dans le dossier imageries, output_style inchangé, environnement également. Donc jusque-là, c’est parfait parce que ça nous permet de pouvoir travailler directement en ligne de commande, sans avoir à venir travailler dans des fichiers textes, comme on le faisait par le passé. Mais pour ceux d’entre nous qui seraient un peu fainéants sur l’écriture de code ici, rappelez-vous, je vous avais dit, pour l’instant on va copier cette partie-là, eh bien, on va venir faire une autre alternative ici. Je vais copier ce code qui m’a permis, depuis la ligne de commande, de créer un projet ici. Je vais retourner dans mon dossier de travail, et ici, à la racine de ce dossier, je vais venir tout supprimer ce qui a été créé, tout ce qu’on vient de fabriquer ici, voilà. Donc on repart à zéro. Et ici, je vais créer un simple fichier texte maintenant, que je vais appeler create. Alors, le nom est purement arbitraire. J’aurais très bien pu l’appeler comme je veux, etc. Moi, je vais l’appeler create pour pouvoir s’en repérer, mnémotechnique. Et ici, sur le Bloc-notes, je vais venir coller cette partie-là. Alors, plutôt que de travailler avec test, cette fois-ci je vais travailler avec autre. Je laisse les préférences telles que les avais faites, je ferme et j’enregistre ce fichier. Par contre, cette fois-ci je vais changer son extension et je vais la mettre en extension bat ici. Pour ceux qui travaillent sous Windows, ils savent que ce fichier bat va être un fichier qui va auto-exécuter une fonction, avec tout son contenu, dans la ligne de commande. Donc si je le lance ici, vous voyez que d’un coup, il vient de me fabriquer directement tout ce dont il a besoin ici, le fichier autre avec tous les éléments, ici, nécessaires, avec tout ce qu’il faut pour pouvoir travailler de manière correcte. Alors, on va aller un tantinet plus loin, je vais le supprimer, encore une fois de plus ici. Je vais éditer ce fichier avec Notepad++, avec qui vous voulez comme éditeur de codes ici. Et ici, dans cet outil d’édition de codes, je vais lui demander de faire un projet que je vais appeler projet, mais je vais le nommer en bare, tout simplement. Et je vais fermer cet élément, je vais l’enregistrer, refermer tout ça. Et quand je rouvre mon create.bat ici, vous avez projet qui apparait, mais cette fois-ci, je n’ai pas tous les fichiers natifs que compass me propose, c'est-à-dire ie, print et screen. Voilà donc on en fait, pour pouvoir trimballer un projet compass, maintenant j’ai simplement besoin de trimballer ce fichier ici dans le dossier dans lequel je veux créer mon projet, faire clic-clic, et puis lancer tout cet élément-là. Alors, tout ce qu’on vient de voir jusqu’à maintenant, c'est-à-dire la création, la configuration et la modification de configuration, fonctionne exactement pareil si je me trouve sous Macintosh. Alors, très rapidement, je pourrais bien sûr venir faire un cd et puis récupérer ce dossier projet, par exemple pour passer à l’intérieur de projet, et puis faire un compass, create, etc. Mais ce que je vous propose de faire, c’est de le faire différemment, c'est-à-dire de fermer le terminal, de ne pas utiliser le terminal, de me mettre à l’intérieur du projet ici, de créer un nouveau fichier de texte. Donc nous pourrions ici, pareil, ouvrir le terminal, puis depuis le terminal, faire un cd par exemple ici, pour basculer d’un projet, et puis commencer par compass, create, etc. On pourrait faire tous ces éléments-là, mais ce qu’on peut également faire, c’est fabriquer l’équivalent d’un .bat ici, mais ici ce sera un .command. Donc on va pouvoir commencer par écrire l’intégralité des lignes de codes qu’on avait faites jusqu’à présent. Donc ici avec un compass create --bare, projet, etc. etc. Sauf qu’ici, on va rajouter une ligne qui va être un cd dirname, avec les deux petites apostrophes-là, vous savez ici, qui sont pas du tout des quotes, mais qui sont sur Windows, le character set avec un ALTGR. Et, en fonction du clavier sous Mac, ça va être le caractère qui est juste sur la touche ~, la partie gauche du clavier. Donc ici, on va demander au directory de se placer sur la console de commande, de se placer sur le directory en cours d’utilisation par ce fichier. Et donc ici, quand on va venir l’enregistrer, on va avoir deux petites erreurs à corriger. La première fois que l’on va sauvegarder, on va le sauvegarder sur create.command et je vais venir le placer sur le Bureau ici, à côté du dossier projet au départ. On va faire save ici. Par contre, dès l’instant où on va vouloir l’exécuter, on va avoir un problème de droits. Donc ici, on va passer pour la première fois, simplement dans la ligne de commande ici, et on va venir faire un cd chmod, on va le placer en 755, et on va venir glisser donc directement notre fichier ici, pour lui demander de passer en chmod 755. Maintenant qu’on a placé ça, on va directement placer notre fichier où on le souhaite. J’ouvre projets, et je vais pouvoir l’exécuter directement, tout place, tranquille. Voilà, c’est terminé. Je peux fermer ma ligne de commande ici, et on a fabriqué l’intégralité de nos fichiers nécessaires avec donc un config.rb, le sass, tous les fichiers dont on a besoin. On va pouvoir les fabriquer de la même manière que ce qu’on avait fait sous Windows.

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 !