Maintenant que nous en avons assez accordé,
il est temps de Gulp.
Nous allons essayer d'effectuer le même type de
tâches que nous avons effectuées avec les scripts NPM et Grunt,
mais maintenant nous allons essayer de faire de même en utilisant les plug-ins Gulp et Gulp.
Pour commencer, installons d'abord Gulp en tant que module global.
Donc, pour ce faire, à l'invite,
tapez npm -g install gulp,
cela installera Gulp en tant que module global et le
rendra disponible pour une utilisation sur la ligne de commande.
Une fois cela terminé,
l'étape suivante consiste à installer Gulp localement dans notre projet.
Donc, à l'invite,
tapez npm install gulp —save-dev.
Une fois ces deux étapes terminées,
il est temps d'aller de l'avant et de configurer nos tâches Gulp.
Avant de faire cela, notre prochaine étape,
nous allons installer le plug-in Gulp Sass afin que nous puissions
configurer le Sass pour voir comme tâche de conversion dans notre fichier Gulp.
Donc, pour aller de l'avant et faire cela,
tapez npm install
gulp sass —save-dev.
Aussi pendant que nous y sommes,
nous pourrions aussi bien installer la tâche Browser Sync Gulp aussi,
afin que nous puissions configurer les deux l'une après l'autre.
Donc, je vais installer, npm installer browser-sync —save-dev.
Une fois ces
deux-là installés, nous allons de l'avant et créons notre fichier Gulp puis configurez nos tâches Gulp ici.
En allant dans notre dossier de projet,
créons un nouveau fichier, puis nommez-le gulpfile.js,
et dans ce fichier, nous allons configurer nos tâches Gulp.
Donc, une fois que le gulpfile.js est prêt,
configurez bien les tâches Gulp ici en
commençant par 'use strict', puis var gulp.
Donc, nous devons exiger les modules de noeud gulp,
et aussi pendant que nous y sommes,
nous aurons besoin du module de noeud sass.
Comme je l'ai mentionné dans l'exercice précédent,
il vous sera plus clair pourquoi le code est écrit comme ceci,
une fois que vous comprendrez plus sur les modules de noeud dans un cours ultérieur.
BrowserSync, donc ce que nous avons fait est d'inclure les
modules de nœuds Gulp Contrast et BowserSync dans notre fichier Gulp.
Et une fois que vous avez fait cela,
il est temps de configurer nos tâches Gulp.
Comme nous l'avons appris précédemment,
Gulp est un code basé sur la façon de configurer
les tâches contrairement à Grunt qui repose davantage sur la configuration des tâches.
Donc, dans le cas de Gulp,
le bébé va configurer nos tâches pour taper
gulp.task, puis nous allons mettre en place un nom de tâche 'sass',
puis pour cette tâche,
nous allons configurer cela comme une fonction,
et c'est ainsi que le code est préparé.
Donc, Gulp Tasks fonction Sass et ici,
nous configurons les tâches Gulp,
donc nous allons taper return gulp.src ('. /css/ *.scss') Comme nous l'avons appris,
Gulp est un outil basé sur le code sur la configuration.
Donc, nous allons préparer cette tâche en tant que telle.
Donc, vous voyez que nous avons spécifié Gulp tuyau source sass sur,
puis ici, erreur.
Donc, si une erreur se produit,
nous allons utiliser la méthode Sass pour enregistrer l'erreur, puis diriger cela
par gulp.dest ('. /css '), et qui
complète la configuration des tâches Gulp Sass.
Vous devez vous demander pourquoi nous écrivons le code comme ça.
Il dit source gulp, puis spécifiez quelque chose là,
puis le suivant dit pipe, puis le suivant dit pipe.
Comprenons la façon Gulp de faire les choses un peu plus en détail.
Pour vous aider à expliquer pourquoi nous configurons des tâches comme ça,
j'ai une explication de ce que nous appelons Gulp Streams.
La façon dont Gulp fonctionne est comme si vous prenez un ensemble de fichiers et vous spécifiez l'ensemble de
fichiers en disant source gulp comme nous l'avons fait avec les tâches Sass là-bas.
Donc ici, c'est la fonction qui prend les fichiers.
Vous pouvez même spécifier les fichiers en utilisant les modèles de globbing que nous avons appris dans Grunt,
puis il crée un flux d'objets qui représente ces fichiers.
Maintenant, une fois que le flux est créé
, le flux peut être acheminé à travers un ensemble de
fonctions l'une après l'autre afin de transformer ces fichiers.
Et puis enfin, les fichiers transformés qui en résultent peuvent être placés dans un emplacement de destination.
C' est pourquoi nous spécifions la source Gulp,
puis nous spécifions le tuyau.
Donc, le tuyau permet au flux d'être canalisé à travers une fonction,
et donc, c'est pourquoi nous avons dit point pipe,
et puis nous avons dit gulp.
Et puis nous avons dit sass sur erreur.
Et puis le suivant dit Pipe Gulp Dest.
Ainsi, le gulp dest spécifie la destination des fichiers qui ont été traités.
Donc, c'est ainsi qu'une tâche typique est spécifiée dans gulp car mais gulp fonctionne sur les flux.
Ainsi, vos fichiers de flux à travers les tuyaux jusqu'à ce qu'ils
soient transférés, puis ils seront déposés à destination spécifiée.
Ainsi, vous verrez une structure similaire pour la plupart des tâches gulp
que nous allons configurer dans cet exercice et le prochain exercice.
Maintenant que vous avez compris un peu comment gulp fonctionne avec les flux et comment
la tâche gulp utilise le tuyau pour traiter les fichiers via un ensemble de fonctions,
et il devient plus clair pour vous pourquoi nous avons configuré cette tâche sass comme vu dans ce code ici.
La tâche suivante que nous allons configurer s'appelle gulp,
et nous allons configurer cette tâche comme sass watch.
Donc, c'est une tâche de surveillance que nous allons configurer,
puis vous spécifieriez la fonction.
Et donc ici,
la tâche de surveillance Gulp Sass,
ce que nous faisons est de spécifier les fichiers que nous allons regarder.
Donc, nous utilisons la tâche Gulp watch pour regarder le fichier.
Donc, la montre est déjà intégrée dans Gulp.
Donc, il faudra Gulp watch et ensuite nous spécifions les fichiers là-bas *.SCSS.
Ainsi, comme vous pouvez le voir, la montre Gulp surveillera
ces fichiers, puis quand des modifications de ces fichiers se produisent,
elle exécutera cette tâche sass,
que nous avons spécifiée plus tôt.
Donc, c'est comme ça que cette tâche de montre sass est configurée.
Maintenant que nous avons fait ces deux,
configurons ensuite cette tâche de synchronisation du navigateur.
Donc, fermez cela avec le point-virgule, puis la
tâche suivante que nous allons configurer est la tâche de synchronisation du navigateur.
Donc, je vais spécifier la tâche de synchronisation du navigateur là.
Et puis pour la tâche de synchronisation du navigateur,
je vais spécifier cette fonction.
Encore une fois, notez la structure dans laquelle nous écrivons le code,
tâche gulp et puis vous spécifiez quelque chose qui a suivi mais avec une fonction.
Maintenant, comme je l'ai dit,
nous apprenons les modules de noeud dans le dernier cours de cette spécialisation,
il deviendra plus clair pour vous pourquoi pas les modules écrits avec cette structure,
et pourquoi les fonctions sont écrites comme ceci.
Donc, nous disons la synchronisation du navigateur de tâche gulp.
Ici, je vais définir une variable,
une variable JavaScript appelée fichiers,
qui n'est rien d'autre que dans le tableau,
et que dans ce tableau de fichiers je spécifierais tous les fichiers que
si modifié la synchronisation du navigateur doit
provoquer le rechargement ou le fichier.
Donc, les fichiers html, les fichiers CSS dans le dossier CSS,
et puis de même je vais également regarder les fichiers image,
et les fichiers JavaScript.
Tous ces fichiers si l'un d'entre eux change.
Donc, après cela, je vais configurer la synchronisation du navigateur ici.
Donc, je vais dire synchronisation du navigateur.
Nous avons déjà défini cette variable appelée synchronisation du navigateur plus tôt.
Donc, nous devons initialiser la synchronisation du navigateur,
et donc, le premier paramètre à cela
est les fichiers qui devront être surveillés,
puis le second paramètre spécifie les options que nous donnons au navigateur.
Donc, l'option que je spécifie est pour le serveur.
Je vais spécifier le répertoire de base comme répertoire courant,
puis cela complète la spécification de la tâche de synchronisation du navigateur.
Donc, avec cela, nous avons terminé de spécifier la tâche de synchronisation du navigateur ici.
Ainsi, vous pouvez voir que la façon dont nous avons configuré la tâche de synchronisation
du navigateur, nous avons spécifié les fichiers, puis enregistrer la
synchronisation du navigateur en elle et fournir les fichiers comme premier paramètre.
Le deuxième paramètre est les options pour le plugin de synchronisation du navigateur.
Ensuite, nous allons planifier ou
nous allons configurer la tâche appelée par défaut.
Tout comme j'ai la tâche par défaut dans Grunt,
nous pouvons également avoir une tâche par défaut similaire définie pour gulp.
Donc, ici, nous disons gulp tâche synchronisation du navigateur par défaut,
puis spécifiez la fonction.
Et à l'intérieur, nous allons spécifier Gulp start.
Donc, cela spécifie que je devrais commencer
cette autre tâche qui sass watch task.La tâche de montre sass doit être démarrée.
Assurez-vous que la tâche de synchronisation du navigateur est en cours d'exécution avant le démarrage de la tâche de surveillance sass.
Donc, c'est la syntaxe pour spécifier cela dans gulp.
Donc, avec cela, nous avons configuré tout ce dont nous avons besoin dans le fichier gulp.
Donc, encore une fois en arrière,
il y a des étapes que nous avons faites.
Nous avons d'abord utilisé require d'inclure tous leurs plugins gulp là,
puis nous avons configuré la tâche sass,
puis spécifié sass watch tâche.
C' est là que nous utilisons la montre Gulp qui nous est disponible comme de Gulp.
Ensuite, nous avons spécifié la tâche de synchronisation du navigateur, puis finalement
reprogrammer la tâche par défaut avec le navigateur Sync et le gulp commencer avec sass watch.
Maintenant, voyons les changements,
puis nous allons aller de l'avant et exécuter le fichier gulp add,
et le type d'invite gulp.
Vous verrez que gulp démarre avec la synchronisation du navigateur et la tâche de surveillance sass démarre,
puis votre synchronisation du navigateur commencera à servir les fichiers.
Si vous affichez votre site Web à l'aide d'un navigateur,
vous pourrez voir le site Web en cours de diffusion dans le navigateur.
Permettez-moi également d'illustrer le fonctionnement de la tâche de veille.
Donc, je vais tirer le style.css et
essayer juste d'enregistrer le changement et vous remarquerez que sur le côté gauche,
la tâche sass est immédiatement appelée et elle
recompilera le fichier style.scss dans les fichiers CSS.
Et puis ce navigateur se rechargera à ce stade.
Avec cela, nous complétons la première partie de l'exercice Gulp.
Dans la deuxième partie, nous allons préparer le dossier de distribution.
C' est le bon moment pour vous de faire un git-commit avec le message Gulp partie 1.