Continuons notre grognement.
Comme nous l'avons fait dans la deuxième partie de l'exercice de scripts NPM,
dans cette deuxième partie de cet exercice de grognement,
nous allons configurer exactement les mêmes tâches.
Nous allons nettoyer le dossier de distribution,
copier les polices dans le dossier de distribution,
puis nous allons également faire la minification de nos images à l'aide d'imagemin,
puis utiliser la tâche usemin pour construire et préparer notre dossier de distribution.
Poursuivant notre exercice,
je vais installer quelques modules de grognement.
Donc, installons NPM, install-grunt-contrib-copy.
Ceci est utilisé pour copier les fichiers, puis grunt-contrib-clean,
et moins save-dev.
Et une fois ces
deux-là installés, nous allons de l'avant et confier les tâches correspondantes.
Pour accéder à votre fichier grunt,
nous ajouterons la configuration à la fois pour la copie et les tâches propres.
Donc, en commençant par la virgule,
rappelez-vous toujours de ne pas oublier la virgule.
Ça reviendra te mordre aux mauvais moments si tu fais ça.
Nous allons donc configurer la tâche de copie.
Pour la copie, usemin s'attend à ce que nous
conservions également nos fichiers HTML copiés dans le dossier de distribution
afin qu'il puisse faire la manipulation sur cela.
Donc, dans ce cas,
nous allons d'abord copier
les fichiers HTML de notre dossier de projet dans le dossier de distribution.
Donc, pour faire la copie,
je vais configurer la partie HTML de celui-ci.
Donc, c'est là que nous allons utiliser une partie de
la syntaxe grognement pour spécifier les fichiers qui doivent être copiés.
Donc, je dis des fichiers et spécifie également les
accolades droite, gauche et droite là donc dans ce,
j'ai besoin de spécifier maintenant une certaine configuration.
Donc, je dirais, développez true et dot true, puis CWD,
le répertoire de travail actuel est dot slash
, et puis après cela,
nous allons configurer le suivant qui est SRC, les fichiers
source, puis les fichiers source sont star.html,
tous les fichiers HTML,
et puis nous allons les copier dans le dossier dist.
C' est pourquoi la destination est définie sur le dossier de distribution ici.
Donc, avec cette configuration,
ma tâche de copie copiera tous les fichiers HTML dans le dossier de distribution.
Maintenant, avec cela, nous devons également copier les polices.
Donc, je vais mettre en place le second pour les polices.
Donc, je spécifie des polices, puis ici aussi j'ai besoin de spécifier
les fichiers qui doivent être copiés et donc nous disons les fichiers,
puis ce sont
quelques paramètres de configuration que vous devez configurer pour la tâche de copie.
Maintenant, si vous avez besoin de comprendre,
alors en lisant la documentation pour le plugin Grunt correspondant,
vous serez en mesure de comprendre cela et ainsi ou vous pouvez
simplement suivre l'exemple que je donne ici.
Donc, point vrai, puis CWD,
le répertoire de travail actuel est des modules de noeud et la police génial.
C' est donc là que je vais copier les fichiers,
puis la source des fichiers est le fontsstar.star, ce
sont les fichiers que j'ai besoin de copier,
et la destination est le dossier de distribution.
Donc, avec cela, j'ai configuré ma tâche de copie pour copier à
la fois les fichiers HTML et les fichiers de polices dans mon dossier de distribution.
Maintenant, la tâche suivante que je vais mettre en place est la tâche propre.
Donc, laissez-moi configurer la tâche propre.
Pour la tâche propre, je vais configurer la construction,
puis je dirai que la source est le dossier de distribution.
Donc, en spécifiant essentiellement que le dossier de distribution doit être nettoyé.
Donc, maintenant, nous avons configuré la copie et les tâches propres alors sauvegardons les modifications.
La tâche suivante que je vais configurer est la tâche imagemin.
C' est ce que nous allons utiliser pour compresser et copier les images dans le dossier de distribution.
Pour commencer avec la tâche imagemin, la première étape,
installez le plugin grunt correspondant.
Donc, grunt-contrib-imagemin, moins save.dev.
Et une fois que cela est installé,
nous allons de l'avant et configurer la tâche imagemin correspondante.
Aller à notre fichier grunt après la configuration de la tâche propre,
je vais configurer la tâche imagemin.
Donc, je vais dire imagemin,
puis juste là,
je vais spécifier dynamique,
et à l'intérieur je vais spécifier les fichiers afin que vous puissiez
voir que la spécification du fichier serait similaire.
Je dirais, développez true,
alors CWD est le répertoire actuel.
Ensuite, la source des fichiers est imagestar.
puis entre parenthèses, entre accolades,
je spécifie PNG, GIF et JPG.
Donc, essentiellement, vous pouvez voir le modèle global de fichier ici.
Donc, il dit tous les
fichiers PNG, GIF ou JPG qui correspond à ce modèle, puis
commencer point signifiant tous les fichiers de ce modèle,
et la source, et la destination, que
j'ai défini comme le dossier de distribution.
Donc, avec cela, nous avons configuré notre
tâche de copie, nettoyage et imagemin.
Configurez une tâche ici appelée build.
Donc, je dirais, enregistrer la tâche,
grossir la tâche de registre et ensuite je nommerai la tâche en tant que construction,
et puis à l'intérieur de cela,
nous allons spécifier les étapes de mise en place à faire par la tâche de construction.
Donc, juste là, point-virgule, puis là,
je vais spécifier les trois tâches dans l'ordre où elles doivent être effectuées.
D' abord, je dirai, propre.
Donc, nous allons nettoyer le dossier de distribution
, puis commencer à reconstruire le dossier de distribution.
Nettoyer, alors la tâche suivante serait
copier et ensuite je ferais, imagemin.
Donc, ces trois tâches à configurer ici.
Donc, avec cela, laissez-moi enregistrer les changements.
Voyons comment ça marche.
Maintenant, en allant à l'invite si je tape,
grogne et construit, vous verrez qu'il va d'abord faire le nettoyage,
puis faire la copie et faire la tâche imagemin.
Donc, il fait tous ces trois et alors vous verrez immédiatement que
le dossier de distribution est construit dans mon dossier de projet ici.
Et dans le dossier de distribution, vous pouvez voir que les polices ont été copiées,
les images ont été copiées et
les trois fichiers HTML ont été copiés dans le dossier de distribution.
Tu n'es qu'à mi-chemin.
Maintenant, nous devons être en mesure de traiter ces fichiers en utilisant le plugin usemin.
Alors, allons-y ensuite.
Maintenant, je vais installer quelques modules NPM
qui sont utiles pour construire le dossier de distribution.
Donc, pour ce faire, je dirais installer NPM.
Je peux spécifier un ensemble de modules ici donc,
je dirais, grunt-contrib-concat.
Donc, ceci est utilisé pour concaténer des fichiers, puis grunt-contrib-cssmin,
grunt-contrib-htmlmin, puis dire, grunt-contrib-uglify.
Puis grunt-filerev.
Vous verrez la raison de l'utilisation de filerev dans un court laps de temps,
puis grunt-usemin, et enregistrez def, puis,
installez tous ces modules grunt.
Une fois que tous ont été installés,
l'étape suivante consiste à aller et configurer,
usemin tâche qui utilise également
les tâches cssmin Uglify Concat pour accomplir la construction du dossier de distribution.
Maintenant, continuons à configurer la tâche usemin.
Donc, revenant au fichier grognement après imagemin,
je vais ajouter à la tâche suivante pour usemin pour travailler avec le grognement.
La première tâche que j'ai besoin de configurer est appelée UseMinPrepare.
Cette tâche UseMinPrepare prépare les fichiers, puis configure également
les plugins ConCache CSS min et Uglify et fichier ref,
afin qu'ils puissent faire leur travail correctement.
Donc, c'est la raison de l'UseMinPrepare.
Donc, c'est ainsi que le plugin d'utilisation de subvention a été conçu.
Un peu différent de la façon dont l'usemin que nous avons utilisé avec les scripts de fin de jeu se réveille.
Donc, dans UseMinPrepare,
juste un nom aléatoire que je vais utiliser, puis dire destination est dist.
Et puis je spécifierais la source comme tous les fichiers html ici.
Donc, je dirais contactus.html
, aboutus.html et index.html.
Donc, tous ces trois fichiers doivent être traités.
La partie suivante de cette configuration d'usemin, la configuration
UseMinPrepare est l'endroit où je spécifie les options.
C' est quelque chose que j'ai compris par essai et erreur.
Il suffit de suivre les étapes.
J' ai donc besoin de configurer
quelques choses ici à l'intérieur où j'ai besoin de configurer quelque chose appelé Flow.
Et puis à l'intérieur, j'ai besoin de configurer une autre partie appelée Steps,
et puis ici je spécifie les étapes ici, puis dis cssmin,
et puis je dirai que js est uglify.
Donc, c'est quelque chose que je dois spécifier ici et puis après cela, je dis post,
et ici je peux permettre à cela de fournir
quelques options pour leurs tâches spécifiques que j'ai configurées.
Donc, je fournit quelques options supplémentaires pour css.
Donc, qui est fourni à l'intérieur du post ici.
Maintenant encore une fois, c'est ainsi que la configuration doit être faite.
Donc, nous venons de l'apprendre en regardant la documentation là-bas.
Donc, ici à l'intérieur du post css,
je spécifierais un nom comme cssmin.
Jusqu' à présent, c'est ici la tâche de cssmin.
Je dirais CreateConfig :
bloc de contexte de fonction, puis à l'intérieur de ces fonctions,
je dois fournir certains paramètres.
Donc, je dirais que var
généré générateur d'options de contexte.
Donc, c'est une variable JavaScript que j'ai besoin de
spécifier là, objet JavaScript essentiellement.
Donc, cet objet contient cette propriété appelée options,
où je peux spécifier quelques options qui sont passées
dans le CSS min demandé par la tâche de préparation usemin.
Donc, là-dedans, gardez
des commentaires spéciaux et puis,
rebaser est faux.
Apparemment, j'ai besoin de fournir ceci pour que ma tâche cssmin gère actuellement
la modification et l'inclusion impressionnantes de la police dans le fichier concaténé.
Si je ne fais pas cela,
il semble briser la police génial et c'est quelque chose que j'ai compris, en
faisant un peu de
recherche sur le débordement de pile et certains de ces endroits et j'ai compris
que leur problème qui est causé avec la police génial peut être
corrigé en incluant ceci dans ma configuration grognement.
Donc, encore une fois, je viens de chercher
les suggestions de certaines personnes qui ont essayé et de résoudre le problème.
Donc, si vous rencontrez des problèmes comme celui-ci,
c'est une façon de résoudre les problèmes qui peuvent survenir lorsque vous
travaillez avec ces différents outils.
Permettez-moi d'ajouter la tâche suivante pour Concat.
Je vais spécifier quelques choses ici et des options.
Je spécifie ce point-virgule,
donc c'est quelque chose que je dois spécifier pour le Concat,
puis aussi après les
options, je spécifie dist comme vide.
Maintenant, ces options Concat seront configurées par UseMinPrepare qui s'exécute plus tôt.
Donc, nous pouvons laisser la plupart des choses vides là,
et puis cela serait reconfiguré par UseMinPrepare.
Le suivant est uglify.
À l'intérieur uglify aussi j'ai juste besoin de spécifier ce dist comme vide.
Si je ne les spécifie pas
, la tâche usemin ne fonctionne pas correctement.
Donc, c'est pourquoi je dois spécifier toutes ces choses explicitement.
Donc, pour cssmin aussi je dirais dist vide.
Et puis, la tâche suivante que je vais configurer est appelée filerev.
Donc, vous m'avez vu installer le plugin filerev pour Grunt.
Que fait ce filerev ?
Ce que fait le filerev, c'est quand usemin prépare les fichiers main.css et main.js,
ce que filerev fait c'est qu'il ajoute une extension supplémentaire à ce nom principal, de
sorte que lorsque vous préparez une nouvelle version de votre site Web et que vous le téléchargez sur la page Web,
au cas où quelqu'un aurait vu votre site Web plus tôt,
alors leur navigateur a peut-être encaissé les fichiers main.css et main.js.
Si vous ne joignez pas ce filerev ce qui se passe est que,
le navigateur ci-dessous télécharge la nouvelle version de votre page Web.
Il peut ne pas télécharger le fichier main.js et main.css
car il les trouve déjà dans son cache local.
Par conséquent, votre page Web peut ne pas être rendue correctement.
Donc, pour faire face au problème,
ce que nous faisons est chaque fois que nous préparons un nouveau dossier de distribution,
nous allons ajouter une révision de fichier.
C' est ce que signifie filerev,
le numéro de révision de fichier,
comme une extension supplémentaire au nom de ces fichiers css et js.
Les fichiers principaux .ss et main.js fichiers le pré-préparé.
C' est ce que fait le filerev.
Maintenant, comment ce filerev peut-il calculer cette valeur ?
Il prend le contenu de ces fichiers, puis effectue un traitement et génère ensuite
un md5 compressé 20 caractères nombre qui sera attaché au fichier principal.
Donc, je vais configurer cette partie ici.
Donc, dans les options,
je spécifie ici en disant comment il est censé calculer ce nombre là.
Donc, je dis encodage utf8,
et puis je dis algorithme qu'il a utilisé pour calculer ce hachage,
ce que nous appelons comme le hachage est md5.
Maintenant, cela deviendra plus clair lorsque nous exécutons réellement
la tâche usemin et que nous verrons ce qu'elle fait, longueur 20.
Donc, je reviendrai et expliquerai ce que
fait cette chose quand nous exécutons réellement la tâche usemin.
Donc, laissez-moi finir les options ici et puis je dirais libération.
Donc, j'ai besoin de mettre en place quelques autres choses ici, puis de libérer,
et puis je dois spécifier les fichiers pour lesquels mon filerev devrait agir.
Donc, je dirais fichiers filerev.
Donc, à l'intérieur du dossier.
Donc, vous commencez à voir un modèle dans la façon dont les choses sont spécifiées ici.
Donc, lorsque vous spécifiez les fichiers ici,
vous direz la source,
puis là vous spécifierez dist CSS,
puis point d'étoile CSS,
puis le prochain dist js*.js.
Donc, avec cela, vous avez configuré le filerev.
Ainsi, la partie filerev est configurée.
Et enfin, nous devons configurer la tâche usemin.
Donc, pour configurer la tâche usemin,
je vais ici et dis usemin,
et ici laissez-moi spécifier quelques options pour la tâche usemin.
Donc, ici, je spécifie html.
Donc, ici, je lui spécifie quels fichiers il doit changer,
il doit mettre à jour.
Ainsi, les fichiers qui ont été copiés dans le dossier de distribution.
Et le dernier est « dist/index.html ».
Donc ce sont les trois fichiers qu'il est censé traiter,
puis quelques options pour cela ici.
Donc, les options que je vais spécifier « AssetsDirs. »
Donc, c'est là que tous les actifs que j'utilise existent.
Ainsi, les fichiers CSS et JavaScript existent.
Donc, je vais spécifier « dist/css » et « dist/js ».
Avec cela, vous avez terminé la configuration de la tâche « usemin ».
Ensuite, nous configurons la tâche « htmlmin ».
Pour la tâche « htmlmin »,
nous avons spécifié la cible qui est « dist », le dossier de distribution
et le « htmlmin » à effectuer sur
tous les fichiers HTML qui se trouvent dans ce dossier de distribution.
Les options que nous spécifions pour cet état que, nous dirons,
« CollapsedWhitespace : True » signifie que
tout l'espace blanc dans les fichiers HTML serait réduit, de
sorte que le [inaudible] ne contient que le code HTML minimum.
La modification supprime essentiellement
tous les caractères étrangers des fichiers « htmlmin ».
Maintenant, nous spécifions également ce dictionnaire de fichiers,
ces fichiers qui doivent être configurés.
Ceci est spécifié comme destination, deux-points, source.
Donc, nous spécifions « dist/index.html » : « dist/index.html »,
ce qui signifie que le « index.html » dans le dossier de distribution
sera [inaudible] puis replacé dans le fichier « index.html »,
également dans le dossier de distribution.
De même, le « contactus.html » spécifié là, puis le
« aboutus.html » également spécifié comme indiqué dans cette liste de fichiers.
La raison pour laquelle nous effectuons « htmlmin » après avoir terminé « usemin »
est que « usemin » remplacera tous les scripts par
le fichier principal « .js » et aussi tout ce
code CSS concaténé et combiné et remplacé par le fichier principal « .css ».
Ainsi, le « htmlmin » sera effectué sur
les fichiers HTML résultants après que « usemin » ait terminé son travail.
C' est ainsi que cela fonctionne dans Grunt.
Ainsi, le Grunt « htmlmin » doit être appliqué après que le « usemin » a terminé son travail.
Donc, une fois que tous ceux-ci sont configurés,
alors une petite étape que je dois faire est de revenir ici,
et puis où nous spécifions pour le « jit-grunt »,
nous devons spécifier que ce « jit-grognement »,
vous rappelez que nous avons introduit quelque chose appelé le
« UseMinPrepare » [inaudible] donc vous devez informer le « jit-grunt » en
disant que la configuration « UseMinPrepare » que nous avons introduite va être
gérée par ce plugin « grunt-usemin » lui-même.
J' ai donc besoin de spécifier explicitement,
sinon « jit-grunt » va chercher un plugin Grunt « UseMinPrepare ».
Donc, pour spécifier à cela,
je dirais « UseMinPrepare » et dire « grunt-usemin »,
informant essentiellement « jit-grunt » en disant que « UseMinPrepare » va être
géré par le plugin « grunt-usemin » là.
Enfin, reconfigurons la tâche « build » en bas.
En descendant à cette tâche « build » après « imagemin ».
Donc, nous avons fait « clean », « copy », « imagemin »,
puis la tâche suivante que je devrais exécuter est « UseMinPreparation », puis après
« UseMinPrepare » exécuter « contact », puis j'exécute « cssmin »,
puis j'exécute « uglify ».
Vous voyez donc que nous devons les faire en un certain nombre d'étapes.
Une fois les fichiers « cssmin » et « uglify » exécutés
, les fichiers principaux « .css » et « .js » seraient créés.
Donc, à ce stade, je vais exécuter le
« filerev », puis finalement j'exécute la tâche « usemin ».
Donc, vous voyez les secrets : « clean », « copy »,
« imagemin », « UseMinPrepare », « concat », « cssmin », « uglify. »
À ce stade, les fichiers « .css » et « .js »,
les fichiers principaux « .css » et « .js » sont prêts.
Je peux faire le « filerev » sur eux et ensuite enfin exécuter le « usemin ».
Mais ceci, sauvegardons les modifications, puis allons
voir comment la tâche « build » prépare réellement la distribution.
[ inaudible] Aller à notre terminal,
à l'invite, je tape « grunt build », puis j'attends que toutes les tâches soient exécutées.
Donc, vous verrez qu'il va exécuter tous les ensembles de tâches,
puis finalement quand il est fait,
il va simplement spécifier que toutes les tâches sont effectuées.
Donc, si vous voulez revenir en arrière et regarder la séquence des tâches qui ont été terminées,
vous pouvez simplement faire défiler et voir ce qu'il fait.
Il nettoie d'abord,
puis il copie les fichiers HTML,
puis il copie les fichiers de police,
puis il fait la tâche « imagemin »,
puis il fait le « UseMinPreparation »,
puis il fait le « concat »,
puis il fait le « cssmin », à
la fois la distribution et générée,
puis il fait le » uglify »,
puis la tâche « uglify », puis il exécute le « filerev », puis enfin la tâche « usemin ».
Et puis notre dossier de distribution devrait maintenant être prêt.
En allant à notre éditeur,
vous voyez maintenant que le dossier de distribution a été préparé.
Regardons spécifiquement les principaux fichiers « .css » et « .js ».
Notez les noms de ces fichiers.
Notez qu'après main,
il y a un point et puis il y a
un hachage de 20 caractères qui a été ajouté par « filerev » ici.
Donc, ce qui se passe est si je prépare un nouveau dossier de distribution,
chaque fois que je prépare le nouveau dossier de distribution, ce hachage change, ce
qui signifie que chaque fois que je déploie une nouvelle version de mon site Web,
si des navigateurs ont déjà consulté mon site Web, puis leurs entrées de cache,
où ils aurait peut-être mis en cache le principal « .css » et le principal « .js » est devenu
invalidé car nous avons une nouvelle version des principaux « .css » et « .js ».
Donc, le navigateur va re-télécharger ces choses.
Je n'ai pas montré le « filerev » avec les scripts NPM,
mais je viens de l'ajouter ici juste pour vous montrer comment c'est fait avec le Grunt.
Donc, avec cela, nous terminons cet exercice.
Jetons un coup d'oeil sur le site dans notre navigateur.
Aller à votre navigateur,
vous pouvez voir que je suis en train de charger dans « dist/index.html ».
Donc, c'est à partir du dossier de distribution,
donc je suis en train de vérifier et ça semble très bien.
Le « aboutus.html » semble également très bien, comme avant.
Et la page de contact semble également bien préparée pour le déploiement.
Donc, avec cela, nous terminons cet exercice.
Après tout ce grognement,
je suis sûr que vous devez reprendre votre souffle.
Avant de faire cela, assurez-vous de faire un bon commentaire avec le message « Grunt deuxième partie. »