Share
Qu'est-ce que Gulp? Une description est que Gulp est un coureur de tâches. Un autre serait qu’il s’agit d’une boîte à outils pour l’automatisation de tâches fastidieuses..
Quoi que vous vouliez appeler, il y a une caractéristique qui reste vraie: l'automatisation. Creusons un peu plus loin…
En gros, vous utilisez Gulp pour automatiser des tâches que vous auriez normalement à faire manuellement, telles que la compilation manuelle de Sass, l'optimisation manuelle des images, l'actualisation manuelle de votre page dans le navigateur, etc..
Eh bien, ces trois actions peuvent être consolidées en tâches indépendantes. Ensuite, vous prendriez ces tâches et laisseriez Gulp les exécuter automatiquement. C’est pourquoi des outils tels que Gulp et Grunt s’appellent des coureurs de tâches..
Une très grande différence entre Gulp et les autres utilisateurs de tâches est la façon dont elle gère les opérations sur les fichiers. Gulp passera essentiellement d’un flux de données d’un plug-in à l’autre sans écrire ce flux dans un fichier temporaire entre ces tâches. Cela s'appelle la tuyauterie ou le streaming.
Si vous recherchez une définition de la tuyauterie sur le Web, vous obtiendrez probablement quelque chose de très technique. Je vais donc essayer de le simplifier un peu. Un workflow Gulp fonctionne avec plusieurs plug-ins différents qui effectuent diverses opérations sur certains fichiers..
Pour vous donner un exemple, le plugin Sass prendra un fichier Sass ou SCSS et le compilera dans un fichier CSS. Le plugin Uglify prend un fichier JavaScript normal et le réduit.
Le truc avec la tuyauterie est donc que vous pouvez prendre un ensemble de fichiers et les exécuter via un ensemble de plugins ou via un plugin. Et vous obtiendrez un type de fichier différent à la fin, exactement ce que j'ai dit avec le plugin Sass. Vous commencez avec un fichier SCSS, et vous vous retrouvez avec un fichier CSS.
Normalement, ces types d'exécution de tâches écrivent des fichiers temporaires sur le disque. Gulp ne le fait pas, il utilise des flux de données..
Ainsi, le contenu de ce fichier est en fait conservé dans un tampon - il s’agit d’un flux de données. Et il vient juste d'être transmis de plug-in à plug-in jusqu'à ce qu'il atteigne sa destination finale. Et entre ces plugins, ce flux passe par quelques changements.
Ainsi, par exemple, vous pouvez commencer par les fichiers SCSS et les transmettre au plug-in Sass. Maintenant, le plugin Sass accepte les fichiers SCSS et renvoie les fichiers CSS. Donc, le flux de données que vous obtenez après le plugin Sass est différent de celui qui est entré dans le plugin.
Et puis vous pouvez faire plus de choses avec ça. Peut-être que vous les exécutez avec un préfixe automatique, non? Donc, Gulp prendra ce flux de données et le fera passer par le plugin autoprefixer, qui accepte les fichiers CSS. Et il renvoie également ce fichier CSS, mais entre les deux, il ajoute tous les préfixes de fournisseur nécessaires. Donc, il modifie également le contenu de ce fichier.
Et enfin, vous pouvez le réduire, par exemple, ou l'écrire sur un disque. Voilà essentiellement comment fonctionne la tuyauterie. Vous transmettez des données au début du flux et vous obtenez un type de données différent à la fin. Au milieu, vous avez ces points qui effectuent certaines opérations sur ce flux de données..
J'espère donc que vous avez maintenant une compréhension de base de ce qu'est Gulp. Pour obtenir une image plus claire, vous pouvez suivre le cours complet, Le Guide du concepteur Web de Gulp, dans lequel nous allons décrire le fonctionnement de Gulp de manière beaucoup plus détaillée..
Vous pouvez suivre ce cours immédiatement avec un abonnement à Envato Elements. Pour un seul forfait mensuel, vous aurez accès non seulement à ce cours, mais également à notre bibliothèque croissante de plus de 1 000 cours vidéo et de livres numériques de premier plan sur l'industrie sur Envato Tuts.+.
De plus, vous obtenez maintenant des téléchargements illimités à partir de la vaste bibliothèque Envato Elements de plus de 440 000 ressources créatives. Créez avec des polices, des photos, des graphiques et des modèles uniques et livrez plus rapidement de meilleurs projets.
Accentsconagua