Le 14 septembre 2017, nous avons publié une version actualisée de notre Politique de confidentialité. En utilisant video2brain.com vous vous engagez à respecter ces documents mis à jour. Veuillez donc prendre quelques minutes pour les consulter.

HTML5 : Optimisation des flux de production

Compiler et employer des gems

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Compilez vos fichiers et assouplissez le processus de lancement. Vous verrez que travailler avec Ruby présente de nombreux avantages. Apprenez aussi à accéder à des gems supplémentaires.
04:27

Transcription

Nous avons commencé par installer sass et compass sur Ruby, on a vu comment on pouvait créer un projet compass grâce à compass, et puis, surtout fabriquer ce fichier bat ici. Donc maintenant, on va continuer la démarche en se disant : mais chaque fois qu'on va enregistrer ces fichiers css, on va pouvoir générer automatiquement un fichier css, toujours en utilisant Ruby. Donc, on commence à lancer notre bat, voilà, il nous crée notre projet, sur ce projet, on a un dossier sass, on va pouvoir déplacer ces deux éléments dans le dossier sass puisque ce sont des fichiers sass ici, et ce que l'on souhaite maintenant, c'est pouvoir fabriquer à la volée, les css. Alors pour cela, ce que je vous propose de faire, c'est de créer un autre fichier txt ici, ce fichier txt, on va l'appeler watch, on pourrait l'appeler comme on veut, ce mot watch est purement arbitraire, et pour l'instant, on va rester tel quel, on va simplement venir l'éditer dans le code ici, voilà, et on va marquer compass watch qui est la commande de surveillance, et attention, on est à l'extérieur du projet, donc on va lui donner le nom du projet ici : compass watch projet, et ici il suffit de venir enregistrer cet élément-là. Si mon projet se serait appelé autrement, on aurait dit compass watch autrement. Alors, ça ne va pas être tellement gain de temps, mais ici, ce qui est intéressant, c'est que lorsque je vais arriver dans mon projet, soit je crée mon projet, soit je pourrais créer un config.bat ici, pour pouvoir modifier la configuration, et vous voyez, je n'ai plus à ouvrir la ligne de commande pour lancer une instruction. Ici, il suffit que je fasse un watch.bat, il part, et il me dit : voilà, je viens de te générer un css et tant que tu ne me feras pas CONTRÔLE-C pour m'arrêter, je continuerai à surveiller ce que tu fais, et à l'enregistrer. Donc ici, si je regarde bien, si j'actualise dans Dreamweaver, j'ai mon dossier css qui s'est crée, et ici, j'ai bien ma couleur qui est 993300, mais si maintenant je viens dans mon fichier partial ici et que je dis que je suis un 4933ff par exemple, ici j'ai changé de couleur, donc je suis passé dans un autre mode de couleur, je l'enregistre, automatiquement si je viens ici, ça s'est enregistré automatiquement dans le css. Et bien sûr, si je repasse un ff99, CONTRÔLE-S j'enregistre, je viens ici, c'est modifié instantanément, je n'ai pas besoin de le corriger, j'ai mon watch qui fait ça. Et tant que je ne casserais pas au niveau de ma commande comme ça, je vais continuer à enregistrer, à générer mon css. Voilà, dès que je vais faire un CONTRÔLE-C, c'est terminé, on me dit : veux-tu arrêter ? J'arrête, et automatiquement ici, si je fais une modification dans ce scss, je repasse par exemple en 9900, CONTRÔLE-S, je bascule sur ce fichier, il n'a pas été modifié puisqu'il ne surveille plus mon dossier. Voilà donc, on voit qu'on peut travailler très rapidement sur Ruby, c'est très simple à utiliser et on peut encore aller plus loin parce que sous Ruby maintenant, je vais pouvoir venir utiliser tout un certain nombre de librairies, de Gems qui seront utilisables. Alors, si ici je viens dans ce site rubygems.org, que je tape des trucs sous sass, je vais pouvoir avoir tout un certain nombre de librairies comme font-awesome qu'on ne vous représente plus, etc., sassy-maps, tous ces éléments que je vais pouvoir utiliser, qui vont pouvoir venir automatiser mes process de développement. Bien sûr, je peux venir chercher sous compass comme ça et je vais trouver également d'autres librairies qui seraient utilisables avec compass directement. Alors, je vais vous en présenter deux, trois qui sont assez intéressantes à utiliser, c'est Susy par exemple qui a un mode de grid et de positionnement qui est assez fabuleux, BREAKPOINT qui va nous permettre de gérer de manière beaucoup plus souple l'ensemble de nos breakpoint enresponsive web design, Bourbon qui est une librairie un peu alternative, on va dire, à compass, et si vous utilisez Bourbon, vous avez Bourbon NEAT qui va être l'équivalent d'un système de grille, et Bourbon Bitters qui va permettre d'avoir une pré-configuration d'un certain nombre d'éléments que vous utilisez généralement dans des applications web qui vont pouvoir être exploitées rapidement. Et si en gros vous n'utilisez pas compass mais Bourbon, vous avez Bourbon NEAT qui va de paire et Bitters, mais si vous utilisez Bourbon, vous n'êtes pas obligé d'utiliser Bourbon NEAT, vous pouvez venir utiliser Susy qui est un mode de grille, complètement révolutionnaire et presque incontournable, on va dire, dès qu'on travaille avec des projets complexes et une mise en page complexe.

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 !