Il est maintenant temps de passer à la deuxième partie de l'exercice Gulp.
Nous continuerons à faire des étapes similaires à celles de
la deuxième partie de l'exercice de script NPM et de l'exercice en cours.
Donc, nous allons organiser pour supprimer le dossier de distribution puis copier les polices,
puis aussi reconstruire le dossier de distribution,
en utilisant des modules de noeud similaires à ceux
que nous avons utilisés pour Grant et aussi les scripts NPM.
Notre prochaine étape consiste à configurer les tâches de suppression
du dossier de distribution et de copie des polices dans le dossier de distribution.
Nous allons donc mettre en place quelques modules de noeud.
Le premier que nous allons mettre en place s'appelle del.
Ce modèle de nœud vous permet de supprimer un dossier.
Et allons de l'avant et configurons les tâches Gulp.
Avec Gulp, heureusement, nous n'avons pas besoin d'installer un autre module pour copier
car les flux Gulp nous permettent de copier les fichiers avec peu d'effort.
Aller au fichier Gulp,
je vais introduire le module mixte Gulp,
ce que je dirai, del.
Et puis exiger le module del ici.
Donc, une fois que nous avons besoin du module del là,
nous pouvons aller de l'avant et mettre en place les tâches.
Donc, nous allons d'abord mettre en place la tâche propre ici.
Donc, juste après la tâche par défaut,
je vais configurer la tâche propre.
Donc, je vais dire, Gulp tâche propre.
Et comme vous pouvez le voir,
cela est configuré comme la fonction là-bas.
Et à l'intérieur que nous dirions, retour del.
Et puis le paramètre fourni est le dossier de distribution ici.
Donc, cela va mettre en place la tâche propre.
Et une fois cette tâche exécutée
, le dossier de distribution va être supprimé.
Notre prochaine tâche consiste à copier les polices dans leur dossier de distribution.
Donc, je dirais, copiez les polices.
Et comme vous pouvez le voir,
nous mettons en place la fonction là, puis fermons la fonction.
Et puis ici, je dirais simplement,
Gulp sources et
modules de noeud, police génial, polices.
Vous pouvez me voir en utilisant les schémas globbing, juste là.
Et puis une fois que nous avons sélectionné tous les fichiers source,
nous les canalisons dans le fichier de destination.
Donc, vous remarquez que nous n'avons pas besoin
d'un module spécifique pour organiser la copie des fichiers.
Nous utilisons simplement les flux source et destination Gulp pour être en mesure de
diriger les fichiers de l'emplacement source vers l'emplacement de destination.
Ainsi, ces deux vont configurer la tâche de nettoyage et de copie des polices.
Ensuite, nous allons configurer le module NPM pour la tâche imagemin.
Donc, la compression et la compression des images.
Donc, pour ce faire, ajoutez le type d'invite Gulp imagemin.
Il s'agit du plugin Gulp correspondant au module de nœud imagemin.
Donc, nous avons installé comme plugin Gulp,
qui est également module de noeud.
Donc, une fois l'installation terminée,
configurons cette tâche imagemin.
Pour accéder à notre fichier Gulp,
nous allons configurer la tâche imagemin ici.
Nous allons donc configurer la tâche imagemin en tant que fonction.
Comme vous pouvez le voir, la structuration du code pour
la définition de tâche Gulp est à peu près standard.
Donc, tu dirais la source Gulp.
Nous spécifions les fichiers source là et les fichiers source dans
le dossier image les
fichiers JPG, GIF et PNG à partir de là.
Et puis les diriger à travers la tâche imagemin.
Et puis je vais mettre en place quelques paramètres ici.
Donc, je vais mettre en place
le niveau d'optimisation à trois, progressif comme vrai.
Ainsi, cela les transformera en images progressives et entrelacées.
Donc, une fois que cela est configuré,
l'étape suivante consiste à les diriger vers leur destination.
Et la destination ici comme vous pouvez le voir est le dossier d'image dans le dossier de distribution.
Donc, avec cela, la tâche imagemin est maintenant configurée.
Maintenant, nous allons construire la tâche de construction ici.
Donc, laissez-moi configurer la tâche de construction.
Donc, pour la construction de la tâche,
ce que vous souhaitez faire est d'abord d'
exécuter la tâche propre avant que
les tâches restantes soient exécutées
parce que nous voulons d'abord nettoyer le dossier de distribution.
Et cela doit être terminé avant que les tâches restantes ne soient effectuées.
Avec Gulp, les tâches sont exécutées automatiquement en parallèle.
Et il peut donc arriver que
si vous exécutez la tâche propre en parallèle avec la tâche restante,
la tâche propre peut finir par finir plus tard,
puis supprimer une partie du travail effectué par les tâches restantes.
C' est pourquoi, lorsque vous spécifiez la tâche Gulp,
si vous spécifiez clean comme premier dans,
comme deuxième paramètre ici,
cela signifie que cette tâche sera terminée en premier.
Et puis les tâches restantes seront exécutées.
Donc, je dirais que Gulp commence.
Avec le Gulp start,
toutes les tâches que nous spécifions ici vont être exécutées en parallèle.
Donc, je vais exécuter la tâche de copie des polices et aussi la tâche imagemin ensemble.
Plus tard, nous allons configurer la tâche usemin, puis l'
exécuter également avec les polices de copie et imagemin.
Une dernière chose que je dois ajouter avant d'aller de l'avant et d'exécuter
les tâches est d'aller ici et ensuite exiger l'imagemin.
Je dirais que imagemin nécessite Gulp imagemin.
Et puis enregistrez les modifications.
Allons maintenant et vérifions la tâche de construction.
À l'invite, si votre type Gulp build,
alors il devrait effectuer les trois tâches.
Donc, vous verrez qu'il démarre la tâche propre et la
termine, puis il démarre la tâche de construction réelle.
Donc, vous pouvez voir qu'en spécifiant
le nettoyage doit être terminé avant que la construction réelle ne se produise,
alors vous assurez-vous que vous nettoyez d'abord le dossier de distribution,
puis la tâche de construction qui comprend
les polices de copie et l'imagemin, tous se terminant en parallèle sera exécutée par la suite.
Aller à l'éditeur,
vous verrez que dans le dossier de distribution,
nous voyons que les polices ont été copiées et les images ont été copiées correctement.
La dernière étape consiste à définir la tâche usemin afin de créer le dossier de distribution.
Pour configurer leur tâche usemin,
je vais installer quelques plugins Gulp donc je dirais installer NPM.
Et puis j'installerais le plugin de fichier uglify Gulp,
qui est évidemment aussi un module de nœud.
Et puis j'installerai le module de noeud usemin, puis le module de noeud rev.
Le module de noeud de rev Gulp est comme le plugin de subvention de graphe de fichier que nous avons vu plus tôt.
C' est légèrement différent du fichier rev que nous avons vu plus tôt,
mais sert le même but.
Donc, Gulp rev, alors je vais mettre en place Gulp CSS propre, puis Gulp flatmap.
Vous verrez la raison de cela que
nous - Nous avons mis en place notre tâche usemin, donc,
et gulp-html min et nous allons de l'avant et installer ces modules ici.
Une fois les modules installés,
nous allons de l'avant et exigeons ces modules dans notre gulpfile, puis configurons la tâche usemin.
En allant à notre gulpfile juste en haut,
je vais exiger les modules que je viens d'installer.
Donc, la gorgée uglify.
Donc, la tâche uglify puis
la tâche usemin gulp usemin,
puis après que
le rév puis,
oublié là, virgule là.
Soyez très prudent de ne pas manquer ces virgules là-bas.
Donc, exiger gulp clean-css, puis flatmap, et htmlmin.
Donc, ce sont les modules gulp
que nous avons installés,
alors sauvegardons les modifications et ensuite nous allons descendre et configurer la tâche usemin.
En venant au bas du fichier gulpfile,
juste là, je vais mettre en place la tâche usemin.
Alors, que fait la tâche usemin ?
Ainsi, la tâche usemin prend
les fichiers html, puis recherche les blocs CSS et JavaScript dans les fichiers html,
combine, concatène, minifie et nuglifie les fichiers, puis
les remplace en utilisant le fichier concaténé dans le dossier de distribution.
Donc, pour commencer,
je commencerais par spécifier la source gulp.
Alors, où sont les fichiers sources ?
Donc, les fichiers source sont les fichiers htmldans le dossier courant.
Alors, gorgée. /start.html, alors je vais
diriger ce gulpfiles à travers ce module gulp appelé comme flatmap.
Que fait flatmap ?
Flatmap prend ces fichiers htmlmultiples, puis
démarre les pipelines parallèles pour chacun de ces fichiers html.
Chacun d'entre eux passant par le même ensemble d'étapes, puis finalement,
convergeant et copiant dans le dossier de destination.
Ainsi, comme vous pouvez le voir dans notre dossier actuel,
nous avons contactus.html, aboutus.html et index.html.
Tous les trois doivent être traités.
Donc, la flatmap nous permet de les traiter en parallèle, en
démarrant le même ensemble de tuyaux pour chacun de ces fichiers,
donc c'est pourquoi j'utilise la flatmap là-bas.
Donc, flatmap, puis à l'intérieur de la flatmap, j'ai besoin de spécifier la fonction,
les deux paramètres ; stream, fichier.
Donc, le fichier prend fondamentalement chacun de ces fichiers source que nous avons spécifiés là,
puis les traite avec le même ensemble de fonctions ici,
puis démarre son flux séparé pour chacun d'eux.
Donc, je vais retourner flux,
et puis je conduirai chacun d'entre eux
à travers la tâche usemin qui elle-même,
comprend la
tâche css et uglify JavaScript et html.
Donc, pour le css, je vais effectuer la partie de révision.
Donc, la partie css fera évidemment la concaténation et la minification et ainsi de suite,
puis applique le rev à cela de sorte qu'il agit
cette chaîne de 20 bits au fichier main.css là.
Donc, pour css, je l'ai mis en place,
puis pour html,
parce que j'ai plusieurs fichiers html,
j'ai besoin de spécifier ceci comme une fonction,
et à l'intérieur de cette fonction je dirais retourner htmlmin.
Et puis à l'intérieur, je vais lui donner le paramètre collapseWhiteSpace,
et ce paramètre serait défini sur true.
Et donc cela complète essentiellement la partie html de celui-ci.
Et puis le suivant est la partie js de celui-ci,
la partie JavaScript,
dont j'ai besoin pour faire l'uglify, puis la révision pour cela.
Et puis, si j'ai du
code javascript en ligne, j'ai besoin d'appliquer
la tâche uglify pour cela,
et puis pour le code inlinecss,
j'utiliserai la tâche CleanSS là-bas avec concat comme paramètre là-bas.
Donc, avec cela, j'ai mis en place ma tâche usemin.
Il répondra donc à toutes ces actions différentes en mon nom.
Et puis une fois qu'ils sont finis,
les flux résultants seront
acheminés vers le dossier de distribution.
Donc, avec cela, la tâche usemin est maintenant toute la configuration définie.
Laissez-moi enregistrer les changements.
Et puis je passerai à la tâche de construction, puis après imagemin, je vais également
ajouter usemin comme l'une des tâches à effectuer par la tâche de construction.
Donc, avec ces changements, donc,
nous avons modifié la tâche de construction,
allons de l'avant et puis vérifions si le dossier de distribution est construit correctement ou non.
Aller à l'invite, laissez-moi taper gulp
build et ensuite attendre que gulp construise toutes les différentes tâches.
Cela prendra un peu de temps pour que l'utilisateur complète son travail,
et quand il est terminé la transformation
, mon dossier de distribution devrait maintenant être prêt pour être consulté.
Aller à l'éditeur, vous pouvez maintenant voir que le dossier de distribution a été
préparé ici et vous pouvez voir l'index, contactus et aboutus.htmlfile.
Vous pouvez voir que lorsque vous ouvrez le fichier index.html,
il a été compressé.
Et le htmlmin a été fait,
en particulier notez comment le fichier css a été remplacé
par css/main- et ensuite vous verrez une longue chaîne there.css.
Donc, c'est exactement comme le fichier rev que vous avez vu en grunt avec le module gulp rev,
c'est ce qu'il fait au nom du fichier.
Donc, si vous regardez le css, vous pouvez voir que le nom du fichier est tiret principal
, puis une chaîne il dot css et similaire pour le javascriptfile.
Donc, c'est ce que fait le module gulp rev,
puis tous ces trois fichiers sont préparés.
Jetons un coup d'oeil à ces fichiers dans le navigateur.
Aller au navigateur, je peux voir qu'il y a des fichiers source sont enregistrés correctement.
Laissez-moi vérifier le dossier de distribution.
Donc, dans le dossier de distribution,
le index.html qui a été préparé par
la tâche de construction gulp semble fonctionner correctement.
Permettez-moi également de consulter la page à propos,
et nous pouvons voir qu'à propos de la page est également construit correctement,
ainsi que la page de contact.
Donc maintenant, vous pouvez voir que notre tâche Gulp est terminée.
Donc, avec cela, nous terminons cet exercice.
Dans cet exercice, nous avons configuré le nettoyage et
la copie des fichiers de polices dans notre dossier de distribution,
nous avons fait la tâche imagemin et finalement nous avons configuré
la tâche usemin pour construire notre dossier de distribution.
Avec cela, nous complétons cet exercice.
Cela peut être un bon moment pour vous de faire un bon commentaire avec le message Gulp deuxième partie.