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

Passer par l'alternative grunt-contrib-less

TESTEZ LINKEDIN LEARNING GRATUITEMENT ET SANS ENGAGEMENT

Tester maintenant Afficher tous les abonnements
Même démarche du côté de l'alternative Grunt. Vous verrez que la description et la définition de la tâche sont plus verbeuses, mais que les options disponibles sont plus fines et plus nombreuses. Choisissez-les selon vos besoins.
05:31

Transcription

Côté alternative avec grunt, on a deux possibilités d’utiliser soit le contrib-less-compiler, soit le contrib-less tout court. Donc on voit que les deux sont réalisés et gérés par contrib donc par l’équipe qui développe et maintient grunt, donc il y a pas de souci là-dessus. Alors comment les comparer ? On peut les comparer déjà par rapport à leur date de publication, lui, on s’aperçoit qu’il a été publié il y a un an, lui, il a été publié il y a quatre mois, il y a déjà pas mal de release qui sont faites, l'équipe de collaborateurs et les options sont réellement nombreuses Ici de ce côté-là, le collaborateur est tout seul et les options sont moindres. Donc voilà des éléments qui vont pouvoir vous aider à faire votre choix. Quoi qu’il en soit, n’hésitez surtout pas à vous rapprocher de leurs github respectifs, de voir l’activité, de voir un peu l’équipe qui peut y avoir derrière, et éventuellement de faire des branches pour adapter à vos besoins, si besoin y était. Quoi qu’il en soit, on va travailler donc sur le grunt-contrib-less. Et si je regarde du côté du dossier d’accueil, alors là il y pas d’arborescences qui ont été faites. Vous pourriez bien sûr placer des fichiers de sortie, des fichiers de source, des fichiers d’importation, etc. Là, tout est mis pèle mêle au même niveau, un package.json, un gruntfile, donc on se rapproche du package.json ici. Tout est prêt à être utilisé, donc gagnons du temps ici, on pointe la ligne de commande sur le dossier en question et on lance tout simplement un npm install. Libre à vous, si vous le souhaitez, de partir d’un npm init et puis, de faire les install nécessaires, c'est-à-dire de grunt et de grunt-contrib-less. Voilà, on va se rapprocher du gruntfile maintenant, du fichier d’initialisation et de la gestion de la tâche. Alors pour ça, toujours pareil, un module exports avec une fonction variable grunt passée. Ce paramètre grunt est récupéré pour un initConfig. Pensez à faire le load plugin, pour cela, vous le récupérez directement sur la page de npmjs, ça va plus vite à écrire. Et puis on va venir commencer à travailler sur notre initialisation ici. Alors, encore une fois, n’hésitez surtout pas à vous rapprocher, de faire votre marché depuis le site, parce que c’est vrai qu’il y a énormément d’informations, énormément d’aides, déjà dans la description des diverses variables, et l’utilisation même d’une configuration nominale de base, on va dire. Donc voyez qu’ici, il y a un travail qui est fait en développement et un travail qui est fait en production sur une propriété qui s’appelle less. Pourquoi ? Parce qu’on a pas forcément les mêmes besoins de compilation, de chemin d’accès, etc. quand on est en développement ou quand on est en production. Donc libre à vous ensuite d’organiser ces deux environnements de manière distincte et différente. Pour notre exemple ici,m on va rester sur une variable less, on va aller au plus simple pour pouvoir le faire fonctionner parce qu’une fois qu’on a compris comment ça fonctionne, c’est toujours pareil, en fait. Ici donc, on va créer un objet de description pour less, et on va créer une première propriété qu’on appellera production. On aurait pu l’appeler développement, vous voyez également. Donc après, c’est exactement la même chose. Donc ici on va créer des options. Dans ces options, on va créer un premier objet. L’option, on pourrait utiliser une compression, compress:true. Donc on va utiliser la compression, et puis, on va rajouter comme deuxième propriété, pour cet environnement de production, ici, les fichiers tout simplement et c’est encore une fois de plus un objet qu’on va venir décrire ici. Et la description va se faire de manière destination-source. Donc ici on va pouvoir dire : tu prendras le fichier. Alors j’aime bien copier-coller parce que c’est des fois problématique sur des erreurs de syntaxe ici. Donc je vais prendre le nom du fichier ici et je lui dis : le fichier de sortie, tu vas me l’afficher en « .css ». Et ici « : », on va placer le fichier d’entrée qui sera ce fichier less ici, donc c’était le « -2.less ». Voilà donc, ici on a placé notre description de tâche et ce qu'il va nous falloir faire maintenant, c’est l’enregistrer. Donc on va faire un grunt.registerTask. On va lui donner la valeur default pour lui dire : dès qu’on appellera par défaut grunt, c’est cette tâche-là que tu vas exécuter, ça sera plus rapide ici, et on va lui dire : les tâches à réaliser c’est un arrêt, pas un objet, ici. Je vais lui dire : tu invoqueras less;production, puisque c’est cette partie-là de la tâche que je vais vouloir récupérer. Bien entendu, on aurait pu faire l’inverse, c'est-à-dire avoir développement et par défaut, quand on appelle ces développements, et quand tu feras less : produit, à ce moment-là on ferra la tâche de less:production. Voilà, une fois que ça c’est terminé, je vais pouvoir enregistrer, retourner du côté de mon dossier, pour bien voir qu’on n'a pas de fichier css ici. Alors on voit que le node-modules s’est installé pendant qu'on faisait le reste. Ici donc on a bien nos deux distributions, donc deux packages qui ont été placées et ici, il suffit que je fasse grunt directement, je l’invoque, et là bingo, on a une feuille de style qui a été créée. C’est réalisé, et je peux retourner dans mon dossier, et là on voit bien que le fichier css a été réalisé. Alors si on regarde du côté de ce fichier css, on voit bien qu’il est compressé, que les couleurs ont été importées, parce que si je regarde là, on voit bien qu’on a l’import classique. Donc on ne le refait plus maintenant. On voit bien que ça a été importé, que tout est fabriqué, et que tout tient sur une seule ligne puisque ça a été compressé. Je vous invite donc maintenant à venir vous rapprocher des diverses autres options que vous avez sous le capot, et vous allez voir que tout ce dont on a besoin quand on produit du less sont là et on va pouvoir directement améliorer, affiner les tâches grunt que l’on pourrait utiliser.

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 !