1 00:00:03,510 --> 00:00:06,510 Lasst uns unser Grunzen fortsetzen. 2 00:00:06,510 --> 00:00:14,660 Wie im zweiten Teil der NPM-Skripte Übung werden 3 00:00:14,660 --> 00:00:17,080 wir in diesem zweiten Teil dieser Grunz-Übung genau die gleichen Aufgaben konfigurieren. 4 00:00:17,080 --> 00:00:20,475 Wir werden den Distributionsordner bereinigen, die 5 00:00:20,475 --> 00:00:23,175 Schriftarten in den Distributionsordner kopieren, 6 00:00:23,175 --> 00:00:29,780 dann werden wir auch die Minifizierung unserer Bilder mit imagemin durchführen 7 00:00:29,780 --> 00:00:37,530 und dann schließlich die Usemin-Aufgabe verwenden, um unseren Distributionsordner zu erstellen und vorzubereiten. 8 00:00:37,530 --> 00:00:40,420 Fortsetzung unserer Übung 9 00:00:40,420 --> 00:00:43,590 werde ich ein paar Grunz-Module installieren. 10 00:00:43,590 --> 00:00:49,990 Also, lassen Sie uns NPM installieren, install-grunt-contrib-copy. 11 00:00:51,110 --> 00:01:00,665 Dies wird zum Kopieren der Dateien und dann grunt-contrib-clean 12 00:01:00,665 --> 00:01:04,575 und minus save-dev verwendet. 13 00:01:04,575 --> 00:01:06,655 Und sobald diese beiden installiert sind, 14 00:01:06,655 --> 00:01:10,595 werden wir fortfahren und die entsprechenden Aufgaben konfigurieren. 15 00:01:10,595 --> 00:01:12,800 Gehen Sie zu Ihrer Grunt-Datei, 16 00:01:12,800 --> 00:01:19,770 werden wir in der Konfiguration für die Kopie und die sauberen Aufgaben hinzufügen. 17 00:01:19,770 --> 00:01:22,895 Also, beginnend mit dem Komma, 18 00:01:22,895 --> 00:01:26,295 denken Sie immer daran, das Komma nicht zu vergessen. 19 00:01:26,295 --> 00:01:30,360 Es wird zurückkommen, um dich in den falschen Momenten zu beißen, wenn du das tust. 20 00:01:30,360 --> 00:01:32,245 Lassen Sie uns also die Kopieraufgabe einrichten. 21 00:01:32,245 --> 00:01:38,180 Für die Kopie erwartet usemin, dass wir auch 22 00:01:38,180 --> 00:01:41,110 unsere HTML-Dateien in den Distributionsordner kopieren 23 00:01:41,110 --> 00:01:44,760 , so dass es die Manipulation daran tun kann. 24 00:01:44,760 --> 00:01:47,250 Also, in diesem Fall 25 00:01:47,250 --> 00:01:48,630 werden wir zuerst 26 00:01:48,630 --> 00:01:53,440 die HTML-Dateien aus unserem Projektordner in den Distributionsordner kopieren. 27 00:01:53,440 --> 00:01:55,330 Also, um das Kopieren zu machen, 28 00:01:55,330 --> 00:02:01,535 werde ich den HTML-Teil davon einrichten. 29 00:02:01,535 --> 00:02:04,740 Also, hier werden wir einige 30 00:02:04,740 --> 00:02:09,920 der grunt-Syntax verwenden, um die Dateien anzugeben, die kopiert werden müssen. 31 00:02:09,920 --> 00:02:19,880 Also, ich sage Dateien und gebe 32 00:02:19,880 --> 00:02:23,560 dort auch die rechten, linken und rechten Klammern an, also 33 00:02:23,560 --> 00:02:27,855 muss ich jetzt bestimmte Konfiguration angeben. 34 00:02:27,855 --> 00:02:37,600 Also, ich würde sagen, erweitern Sie true und dot true, dann CWD, 35 00:02:37,600 --> 00:02:42,015 das aktuelle Arbeitsverzeichnis ist Punkt Schrägstrich 36 00:02:42,015 --> 00:02:44,440 , und danach 37 00:02:44,440 --> 00:02:51,730 werden wir die nächste konfigurieren, die SRC ist, die Quelldateien, 38 00:02:51,730 --> 00:02:56,690 und dann sind 39 00:02:56,690 --> 00:02:59,325 die Quelldateien star.html, alle HTML-Dateien, 40 00:02:59,325 --> 00:03:05,850 und dann werden wir sie kopieren den Ordner „dist“. 41 00:03:05,850 --> 00:03:10,135 Deshalb ist das Ziel auf den Distributionsordner hier festgelegt. 42 00:03:10,135 --> 00:03:12,385 Mit dieser Einrichtung 43 00:03:12,385 --> 00:03:18,880 kopiert meine Kopieraufgabe alle HTML-Dateien in den Distributionsordner. 44 00:03:18,880 --> 00:03:22,285 Nun müssen wir auch die Schriftarten kopieren. 45 00:03:22,285 --> 00:03:26,200 Also werde ich die zweite für die Schriftarten einrichten. 46 00:03:26,200 --> 00:03:31,090 Also, ich gebe Schriftarten an und dann muss ich auch hier 47 00:03:31,090 --> 00:03:37,500 die Dateien angeben, die kopiert werden müssen, und so sagen wir Dateien, 48 00:03:37,500 --> 00:03:41,780 und dann sind dies 49 00:03:41,780 --> 00:03:47,465 einige Konfigurationsparameter, die Sie für die Kopieraufgabe einrichten müssen. 50 00:03:47,465 --> 00:03:49,225 Nun, wenn Sie verstehen müssen, 51 00:03:49,225 --> 00:03:54,510 dann, indem Sie die Dokumentation für das entsprechende Grunt-Plugin lesen, 52 00:03:54,510 --> 00:03:57,650 können Sie dies herausfinden und so oder Sie können 53 00:03:57,650 --> 00:04:00,960 einfach dem Beispiel folgen, das ich hier gebe. 54 00:04:00,960 --> 00:04:05,350 Also, dot true, und dann CWD, 55 00:04:05,350 --> 00:04:14,780 das aktuelle Arbeitsverzeichnis ist Knotenmodule und Schriftart genial. 56 00:04:14,780 --> 00:04:18,295 Also, hier werde ich die Dateien kopieren, 57 00:04:18,295 --> 00:04:27,180 und dann ist die Quelle der Dateien die fontsstar.star, das 58 00:04:27,180 --> 00:04:30,310 sind die Dateien, die ich kopieren muss, 59 00:04:30,310 --> 00:04:38,370 und das Ziel ist der Distributionsordner. 60 00:04:38,370 --> 00:04:42,050 Damit habe ich meine Kopieraufgabe eingerichtet, um 61 00:04:42,050 --> 00:04:47,490 sowohl die HTML-Dateien als auch die Schriftartendateien in meinen Distributionsordner zu kopieren. 62 00:04:47,490 --> 00:04:52,370 Nun, die nächste Aufgabe, die ich einrichten werde, ist die saubere Aufgabe. 63 00:04:52,370 --> 00:04:56,290 Lassen Sie mich also die saubere Aufgabe konfigurieren. 64 00:04:56,540 --> 00:05:05,825 Für die saubere Aufgabe konfiguriere ich den Build, 65 00:05:05,825 --> 00:05:13,460 und dann werde ich sagen, dass die Quelle der Distributionsordner ist. 66 00:05:13,460 --> 00:05:19,660 Im Wesentlichen wird angegeben, dass der Distributionsordner bereinigt werden soll. 67 00:05:19,830 --> 00:05:27,835 Also, jetzt haben wir die Kopie und die sauberen Aufgaben eingerichtet, so lassen Sie uns die Änderungen speichern. 68 00:05:27,835 --> 00:05:31,530 Die nächste Aufgabe, die ich einrichten werde, ist die Imagemin-Aufgabe. 69 00:05:31,530 --> 00:05:40,030 Dies ist, was wir verwenden, um die Bilder zu komprimieren und in den Distributionsordner zu kopieren. 70 00:05:40,030 --> 00:05:44,200 Um mit der Imagemin-Aufgabe zu beginnen, 71 00:05:44,200 --> 00:05:49,910 installieren Sie im ersten Schritt das entsprechende Grunt-Plugin. 72 00:05:49,910 --> 00:06:00,520 Also, grunt-contrib-imagemin, minus save.dev. 73 00:06:00,520 --> 00:06:03,470 Und sobald das installiert ist, 74 00:06:03,470 --> 00:06:07,330 werden wir fortfahren und die entsprechende Imagemin-Task konfigurieren. 75 00:06:07,330 --> 00:06:12,015 Wenn ich nach der Konfiguration für die saubere Aufgabe 76 00:06:12,015 --> 00:06:15,620 zu unserer Grunt-Datei gehe, werde ich die Imagemin-Aufgabe konfigurieren. 77 00:06:15,620 --> 00:06:18,050 Also, ich werde imagemin sagen, 78 00:06:19,460 --> 00:06:22,055 und dann genau da drin 79 00:06:22,055 --> 00:06:26,225 werde ich dynamisch angeben, 80 00:06:26,225 --> 00:06:30,950 und dort werde ich die Dateien angeben, damit Sie 81 00:06:30,950 --> 00:06:36,010 sehen können, dass die Dateispezifikation ähnlich wäre. 82 00:06:36,010 --> 00:06:39,130 Ich würde sagen, erweitern Sie true, 83 00:06:39,130 --> 00:06:46,830 dann ist CWD das aktuelle Verzeichnis. 84 00:06:49,680 --> 00:06:58,350 Dann ist die Quelle der Dateien imagestar. 85 00:07:00,840 --> 00:07:05,405 und dann in Klammern, in Klammern, 86 00:07:05,405 --> 00:07:12,910 gebe ich PNG, GIF und JPG an. 87 00:07:12,910 --> 00:07:17,000 Im Wesentlichen können Sie hier das globale Muster der Datei sehen. 88 00:07:17,000 --> 00:07:18,640 Es sagt also alle PNG-, GIF- 89 00:07:18,640 --> 00:07:21,610 oder JPG-Dateien, die diesem Muster entsprechen und dann 90 00:07:21,610 --> 00:07:25,755 Startpunkt bedeutet, dass alle Dateien dieses Musters 91 00:07:25,755 --> 00:07:29,280 und Quelle und das Ziel, das 92 00:07:29,280 --> 00:07:34,310 ich als Distributionsordner festgelegt habe. 93 00:07:34,310 --> 00:07:37,790 Damit haben wir unsere Kopier-, 94 00:07:37,790 --> 00:07:39,425 Säuberungs- und Imagemin-Aufgabe konfiguriert. 95 00:07:39,425 --> 00:07:46,670 Lassen Sie uns eine Aufgabe konfigurieren, die hier Build genannt wird. 96 00:07:46,670 --> 00:07:49,365 Also, ich würde sagen, registrieren Sie Aufgabe, 97 00:07:49,365 --> 00:07:55,700 grunt registrieren Aufgabe und dann werde ich die Aufgabe als Build benennen, 98 00:07:55,700 --> 00:07:57,695 und dann 99 00:07:57,695 --> 00:08:03,160 werden wir in diesem, die Einrichtungsschritte angeben, die von der Build-Aufgabe durchgeführt werden sollen. 100 00:08:03,160 --> 00:08:09,105 Also, genau da, Semikolon und dann 101 00:08:09,105 --> 00:08:13,685 werde ich die drei Aufgaben in der Reihenfolge angeben, in der sie ausgeführt werden sollen. 102 00:08:13,685 --> 00:08:16,650 Zuerst werde ich sagen, sauber. 103 00:08:16,650 --> 00:08:19,420 Also werden wir den Distributionsordner bereinigen 104 00:08:19,420 --> 00:08:22,340 und dann den Distributionsordner neu erstellen. 105 00:08:22,340 --> 00:08:27,320 Sauber, dann wäre die nächste Aufgabe 106 00:08:27,320 --> 00:08:36,980 kopieren und dann danach würde ich tun, imagemin. 107 00:08:37,380 --> 00:08:41,340 Also diese drei Aufgaben hier konfiguriert werden. 108 00:08:41,340 --> 00:08:43,910 Lassen Sie mich damit die Änderungen speichern. 109 00:08:43,910 --> 00:08:46,590 Mal sehen, wie das Ding funktioniert. 110 00:08:46,590 --> 00:08:50,280 Nun, wenn ich zur Eingabeaufforderung gehe, wenn ich tippe, 111 00:08:50,280 --> 00:08:57,955 grunt und baue, werden Sie sehen, dass es zuerst die Reinigung macht, 112 00:08:57,955 --> 00:09:01,550 dann um die Kopie zu machen und die Imagemin-Aufgabe auszuführen. 113 00:09:01,550 --> 00:09:05,600 Also, es macht all diese drei und dann würden Sie sofort sehen, dass 114 00:09:05,600 --> 00:09:11,810 der Distributionsordner hier in meinem Projektordner aufgebaut ist. 115 00:09:11,810 --> 00:09:15,200 Und innerhalb des Distributionsordners können Sie sehen, dass die Schriftarten kopiert wurden, 116 00:09:15,200 --> 00:09:16,590 die Bilder kopiert wurden und 117 00:09:16,590 --> 00:09:20,665 die drei HTML-Dateien in den Distributionsordner kopiert wurden. 118 00:09:20,665 --> 00:09:22,350 Du bist nur auf halbem Weg da. 119 00:09:22,350 --> 00:09:29,370 Jetzt müssen wir in der Lage sein, diese Dateien mit dem Usemin-Plugin zu verarbeiten. 120 00:09:29,370 --> 00:09:31,675 Also, lasst uns als Nächstes gehen. 121 00:09:31,675 --> 00:09:35,140 Jetzt werde ich ein paar NPM-Module installieren 122 00:09:35,140 --> 00:09:38,555 , die nützlich sind, um den Distributionsordner zu erstellen. 123 00:09:38,555 --> 00:09:42,225 Also, um das zu tun, würde ich sagen, NPM installieren. 124 00:09:42,225 --> 00:09:47,120 Ich kann hier eine Reihe von Modulen angeben, also 125 00:09:47,120 --> 00:09:52,300 würde ich sagen, grunt-contrib-concat. 126 00:09:52,300 --> 00:10:01,000 Also, dies wird zum Verketten von Dateien verwendet, dann grunt-contrib-cssmin, 127 00:10:01,000 --> 00:10:13,512 grunt-contrib-htmlmin, dann sagen wir, grunt-contrib-uglify. 128 00:10:13,512 --> 00:10:18,240 Dann grunt-filerev. 129 00:10:18,240 --> 00:10:21,910 Sie werden den Grund für die Verwendung von filerev in kurzer Zeit sehen, 130 00:10:21,910 --> 00:10:32,925 und dann grunt-usemin, und speichern Sie def und 131 00:10:35,475 --> 00:10:40,050 installieren Sie dann alle diese Grunt-Module. 132 00:10:40,050 --> 00:10:42,205 Sobald alle von ihnen installiert wurden, 133 00:10:42,205 --> 00:10:44,305 ist der nächste Schritt zu gehen und zu konfigurieren, 134 00:10:44,305 --> 00:10:47,625 usemin Aufgabe, die auch 135 00:10:47,625 --> 00:10:55,090 die cssmin Uglify Concat Aufgaben verwendet, um den Aufbau des Distributionsordners durchzuführen. 136 00:10:55,090 --> 00:10:59,140 Jetzt können Sie fortfahren, um die Usemin-Task zu konfigurieren. 137 00:10:59,140 --> 00:11:03,750 Also gehe ich zurück zur Grunt-Datei nach dem Imagemin, 138 00:11:03,750 --> 00:11:10,950 werde ich die nächste Aufgabe hinzufügen, damit Usemin mit dem Grunzen arbeiten kann. 139 00:11:10,950 --> 00:11:17,165 Die erste Aufgabe, die ich konfigurieren muss, heißt UseMinPrepare. 140 00:11:19,145 --> 00:11:25,175 Diese UseMinPreparate-Aufgabe bereitet die Dateien vor und konfiguriert dann auch 141 00:11:25,175 --> 00:11:32,655 die ConCache CSS min und Uglify und file ref Plugins, 142 00:11:32,655 --> 00:11:35,070 so dass sie ihre Arbeit richtig erledigen können. 143 00:11:35,070 --> 00:11:36,915 Also, das ist der Grund für die UseMinPrepare. 144 00:11:36,915 --> 00:11:42,220 So wurde das Grant-Usemin-Plugin entwickelt. 145 00:11:42,220 --> 00:11:48,340 Etwas anders als die Art und Weise, wie der Usemin, den wir mit den Endspiel-Skripten verwendet Wooks. 146 00:11:48,340 --> 00:11:50,295 Also, in der UseMinPrepare, 147 00:11:50,295 --> 00:11:59,590 nur ein zufälliger Name, den ich verwenden werde und dann sagen, Ziel ist dist. 148 00:11:59,590 --> 00:12:08,730 Und dann würde ich die Quelle als alle HTML-Dateien hier angeben. 149 00:12:08,730 --> 00:12:13,605 Also würde ich sagen contactus.html 150 00:12:14,875 --> 00:12:23,550 , aboutus.html und index.html. 151 00:12:23,550 --> 00:12:26,915 Also, alle diese drei Dateien müssen verarbeitet werden. 152 00:12:26,915 --> 00:12:30,765 Im nächsten Teil dieser 153 00:12:30,765 --> 00:12:37,735 UseMinPrepare-Konfiguration gebe ich die Optionen an. 154 00:12:38,115 --> 00:12:43,245 Das ist etwas, was ich durch Versuch und Irrtum herausgefunden habe. 155 00:12:44,995 --> 00:12:47,395 Folgen Sie einfach den Schritten entlang. 156 00:12:47,395 --> 00:12:48,845 Also muss ich 157 00:12:48,845 --> 00:12:54,125 hier ein paar Dinge konfigurieren, wo ich etwas namens Flow konfigurieren muss. 158 00:12:54,125 --> 00:13:00,695 Und dann muss ich dort einen anderen Teil namens Steps konfigurieren, 159 00:13:00,695 --> 00:13:07,875 und dann gebe ich hier die Schritte an und sage dann cssmin, 160 00:13:07,915 --> 00:13:14,645 und dann werde ich sagen, js ist hässlich. 161 00:13:14,645 --> 00:13:21,515 Also, das ist etwas, das ich hier und dann danach angeben muss, sage ich Post, 162 00:13:24,405 --> 00:13:29,695 und hier kann ich zulassen, dass dies 163 00:13:29,695 --> 00:13:36,475 einige Optionen für ihre spezifischen Aufgaben bereitstellt, die ich konfiguriert habe. 164 00:13:36,475 --> 00:13:40,175 Also, ich bereitstelle einige zusätzliche Optionen für CSS zur Verfügung. 165 00:13:40,175 --> 00:13:44,540 Also, das wird innerhalb der Post hier geliefert. 166 00:13:44,540 --> 00:13:49,485 Jetzt wieder, so muss die Konfiguration durchgeführt werden. 167 00:13:49,485 --> 00:13:52,695 Also haben wir es gerade gelernt, indem wir uns die Dokumentation dort ansehen. 168 00:13:52,695 --> 00:13:55,390 Also, hier in der Post CSS, 169 00:13:55,390 --> 00:13:59,275 würde ich einen Namen als cssmin angeben. 170 00:13:59,275 --> 00:14:01,450 Bisher ist dies hier cssmin Aufgabe. 171 00:14:01,450 --> 00:14:07,974 Ich würde sagen CreateConfig: 172 00:14:08,775 --> 00:14:17,005 Funktionskontextblock, und dann innerhalb dieser Funktion 173 00:14:17,005 --> 00:14:19,955 muss ich bestimmte Parameter angeben. 174 00:14:19,955 --> 00:14:22,175 Also würde ich sagen, var 175 00:14:22,175 --> 00:14:31,835 generierte Kontextoptionen Generator. 176 00:14:31,835 --> 00:14:34,685 Das ist also eine JavaScript-Variable, die ich 177 00:14:34,685 --> 00:14:38,705 dort angeben muss, JavaScript-Objekt im Wesentlichen. 178 00:14:38,705 --> 00:14:44,185 Also, dieses Objekt enthält diese Eigenschaft namens Optionen, 179 00:14:44,185 --> 00:14:48,005 wo ich einige Optionen angeben kann, die in die 180 00:14:48,005 --> 00:14:51,485 CSS-Min übergeben werden, die von der usemin-Vorbereitungsaufgabe beauftragt wird. 181 00:14:51,485 --> 00:14:56,310 Also, da drin, halten Sie 182 00:14:56,310 --> 00:15:02,105 spezielle Kommentare und dann, 183 00:15:05,655 --> 00:15:08,635 Rebase ist falsch. 184 00:15:08,635 --> 00:15:16,025 Anscheinend muss ich dies bereitstellen, damit meine cssmin-Aufgabe derzeit 185 00:15:16,025 --> 00:15:23,855 die Schriftartänderung und Aufnahme in die verkettete Datei behandelt. 186 00:15:23,855 --> 00:15:25,390 Wenn ich das nicht mache, 187 00:15:25,390 --> 00:15:29,380 scheint es die Schriftart großartig zu brechen, und das ist etwas, das ich herausgefunden habe, 188 00:15:29,380 --> 00:15:31,890 indem ich ein wenig 189 00:15:31,890 --> 00:15:37,285 über Stapelüberlauf und einige dieser Orte recherchierte und herausgefunden habe 190 00:15:37,285 --> 00:15:42,505 , dass ihr Problem, das mit Schriftart großartig verursacht wird, 191 00:15:42,505 --> 00:15:48,619 behoben werden kann, indem dies in meine Grunz-Konfiguration. 192 00:15:48,619 --> 00:15:51,445 Also, wieder habe ich gerade 193 00:15:51,445 --> 00:15:55,810 die Vorschläge von einigen Leuten nachgeschaut, die versucht haben und das Problem zu beheben. 194 00:15:55,810 --> 00:15:58,465 Wenn Sie also auf Probleme wie diese stoßen, 195 00:15:58,465 --> 00:16:02,675 ist dies eine Möglichkeit, Probleme zu lösen, die auftreten können, wenn Sie 196 00:16:02,675 --> 00:16:07,525 mit diesen verschiedenen Tools arbeiten. 197 00:16:07,525 --> 00:16:14,710 Lassen Sie mich die nächste Aufgabe für Concat hinzufügen. 198 00:16:14,710 --> 00:16:21,180 Ich werde hier einige Dinge und Optionen angeben. 199 00:16:21,180 --> 00:16:28,135 Ich gebe dieses Semikolon an, 200 00:16:28,135 --> 00:16:31,215 also muss ich dies für das Concat angeben, 201 00:16:31,215 --> 00:16:37,725 und dann auch nach 202 00:16:37,725 --> 00:16:43,180 Optionen gebe ich dist als leer an. 203 00:16:43,180 --> 00:16:48,385 Jetzt werden diese Concat-Optionen von der UseMinPrepare konfiguriert, die früher ausgeführt wird. 204 00:16:48,385 --> 00:16:50,435 So können wir das meiste davon leer lassen, 205 00:16:50,435 --> 00:16:54,005 und dann würde das von der UseMinPreparate neu konfiguriert werden. 206 00:16:54,005 --> 00:16:57,005 Der nächste ist hässlich. 207 00:16:57,665 --> 00:17:06,055 Innerhalb hässlich muss ich auch diese Dist nur als leer angeben. 208 00:17:06,055 --> 00:17:08,255 Wenn ich diese nicht spezifiziere 209 00:17:08,255 --> 00:17:12,890 , funktioniert die Usemin-Aufgabe nicht korrekt. 210 00:17:12,890 --> 00:17:16,785 Deshalb muss ich all diese Dinge explizit angeben. 211 00:17:16,785 --> 00:17:21,905 Also für cssmin würde ich auch dist leer sagen. 212 00:17:21,905 --> 00:17:29,005 Und dann wird die nächste Aufgabe, die ich konfigurieren werde, filerev genannt. 213 00:17:29,625 --> 00:17:36,725 Also, Sie haben gesehen, wie ich das filerev Plugin für Grunt installiert habe. 214 00:17:36,725 --> 00:17:38,480 Was macht dieses filerev? 215 00:17:38,480 --> 00:17:44,640 Was die filerev tut, ist, wenn usemin die Datei main.css und main.js vorbereitet, 216 00:17:44,640 --> 00:17:53,170 was filerev tut, ist es eine zusätzliche Erweiterung zu diesem Hauptnamen hinzuzufügen, 217 00:17:53,170 --> 00:18:02,070 so dass, wenn Sie eine neue Version Ihrer Website vorbereiten und sie auf die Webseite hochladen, 218 00:18:02,070 --> 00:18:05,895 falls jemand Ihre Website früher gesehen hat, 219 00:18:05,895 --> 00:18:12,030 dann Ihr Browser könnte die Dateien main.css und main.js eingelöst haben. 220 00:18:12,030 --> 00:18:15,675 Wenn Sie diese Datei nicht anhängen, was passiert, ist 221 00:18:15,675 --> 00:18:21,480 das, der Browser darunter lädt die neue Version Ihrer Webseite herunter. 222 00:18:21,480 --> 00:18:24,605 Die Datei main.js und main.css wird möglicherweise nicht heruntergeladen 223 00:18:24,605 --> 00:18:28,515 , da sie bereits im lokalen Cache gefunden wurde. 224 00:18:28,515 --> 00:18:31,820 Daher wird Ihre Webseite möglicherweise nicht korrekt gerendert. 225 00:18:31,820 --> 00:18:33,725 Also, um mit dem Problem umzugehen, 226 00:18:33,725 --> 00:18:37,535 was wir tun, ist jedes Mal, wenn wir einen neuen Distributionsordner vorbereiten, 227 00:18:37,535 --> 00:18:41,235 werden wir eine Dateirevision hinzufügen. 228 00:18:41,235 --> 00:18:43,045 Dafür steht die filerev, 229 00:18:43,045 --> 00:18:44,985 die Dateirevisionsnummer, 230 00:18:44,985 --> 00:18:54,100 als zusätzliche Erweiterung für den Namen dieser css- und js-Datei. 231 00:18:54,100 --> 00:18:56,950 Die main.ss und main.js Dateien die vorbereiteten. 232 00:18:56,950 --> 00:18:58,820 Das ist also, was der filerev tut. 233 00:18:58,820 --> 00:19:02,440 Nun, wie kann dieser filerev diesen Wert berechnen? 234 00:19:02,440 --> 00:19:07,685 Es nimmt den Inhalt dieser Dateien und dann einige Verarbeitung und erzeugt dann 235 00:19:07,685 --> 00:19:14,655 eine md5 komprimierte 20 Zeichen Nummer, die an die Hauptdatei angehängt wird. 236 00:19:14,655 --> 00:19:17,440 Also, ich werde diesen Teil hier konfigurieren. 237 00:19:17,440 --> 00:19:20,245 Also, in den Optionen, 238 00:19:20,245 --> 00:19:30,990 gebe ich hier an und sage, wie es diese Zahl dort berechnen soll. 239 00:19:30,990 --> 00:19:33,740 Also, ich sage Codierung utf8, 240 00:19:33,740 --> 00:19:40,150 und dann sage ich Algorithmus, den er verwendet, um diesen Hash zu berechnen, 241 00:19:40,150 --> 00:19:43,544 was wir als Hash nennen, ist md5. 242 00:19:43,544 --> 00:19:47,060 Jetzt wird es klarer, wenn wir 243 00:19:47,060 --> 00:19:53,020 die Usemin-Task tatsächlich ausführen und dann sehen, was sie tut, Länge 20. 244 00:19:53,020 --> 00:19:55,475 Also werde ich zurückkommen und erklären, was dieses Ding 245 00:19:55,475 --> 00:19:59,460 tut, wenn wir die Usemin-Aufgabe tatsächlich ausführen. 246 00:19:59,460 --> 00:20:06,790 Also, lassen Sie mich die Optionen hier beenden und dann würde ich sagen, Release. 247 00:20:06,790 --> 00:20:10,855 Also, ich muss hier ein paar weitere Dinge einrichten und dann freigeben, 248 00:20:10,855 --> 00:20:18,150 und dann muss ich die Dateien angeben, für die mein filerev handeln soll. 249 00:20:18,150 --> 00:20:20,625 Also würde ich sagen, filerev Dateien. 250 00:20:20,625 --> 00:20:22,005 Also, drinnen hier Akte. 251 00:20:22,005 --> 00:20:26,645 Sie beginnen also, ein Muster in der Art und Weise zu sehen, wie die Dinge hier angegeben werden. 252 00:20:26,645 --> 00:20:28,640 Also, wenn Sie die Dateien hier angeben, 253 00:20:28,640 --> 00:20:30,775 werden Sie die Quelle sagen, 254 00:20:30,775 --> 00:20:37,815 und dann werden Sie dist CSS 255 00:20:37,815 --> 00:20:41,025 und dann Stern Punkt CSS angeben, 256 00:20:41,025 --> 00:20:47,295 und dann die nächste dist js*.js. 257 00:20:47,295 --> 00:20:51,225 Damit haben Sie das filerev konfiguriert. 258 00:20:51,225 --> 00:20:53,625 Also, der filerev Teil ist konfiguriert. 259 00:20:53,625 --> 00:20:58,820 Und schließlich müssen wir die Usemin-Aufgabe konfigurieren. 260 00:20:58,820 --> 00:21:00,795 Also, um die Usemin-Aufgabe zu konfigurieren, 261 00:21:00,795 --> 00:21:04,125 gehe ich hier nach unten und sage usemin, 262 00:21:04,125 --> 00:21:09,100 und hier lassen Sie mich einige Optionen für die usemin-Aufgabe angeben. 263 00:21:09,100 --> 00:21:12,470 Also, hier gebe ich html an. 264 00:21:12,470 --> 00:21:21,205 Also, hier gebe ich an, welche Dateien es ändern muss, 265 00:21:22,255 --> 00:21:25,455 es muss aktualisiert werden. 266 00:21:25,455 --> 00:21:32,465 Also, die Dateien, die in den Distributionsordner kopiert wurden. 267 00:21:33,290 --> 00:21:41,975 Und der letzte ist „dist/index.html“. 268 00:21:41,975 --> 00:21:50,300 Das sind also die drei Dateien, die es verarbeiten soll, 269 00:21:50,510 --> 00:21:55,095 und dann einige Optionen dafür hier. 270 00:21:55,095 --> 00:22:04,970 Also, die Optionen werde ich angeben „AssetsDirs.“ 271 00:22:04,970 --> 00:22:10,520 Also, hier gibt es alle Vermögenswerte, die ich verwende. 272 00:22:10,520 --> 00:22:14,355 So existieren die CSS und die JavaScript-Dateien. 273 00:22:14,355 --> 00:22:21,715 Also werde ich „dist/css“ und „dist/js“ angeben. 274 00:22:21,715 --> 00:22:27,020 Damit haben Sie die Konfiguration der Aufgabe „usemin“ abgeschlossen. 275 00:22:27,020 --> 00:22:30,930 Als nächstes konfigurieren wir die Aufgabe „htmlmin“. 276 00:22:30,930 --> 00:22:32,870 Für die Aufgabe „htmlmin“ 277 00:22:32,870 --> 00:22:37,160 haben wir das Ziel „dist“, den Distributionsordner 278 00:22:37,160 --> 00:22:40,140 und das „htmlmin“ angegeben, 279 00:22:40,140 --> 00:22:44,690 das für alle HTML-Dateien in diesem Distributionsordner ausgeführt werden soll. 280 00:22:44,690 --> 00:22:49,560 Die Optionen, die wir für diesen Zustand angeben, dass, wir sagen, 281 00:22:49,560 --> 00:22:53,945 „CollapsedWhitespace: True“ bedeutet, dass 282 00:22:53,945 --> 00:22:58,715 der gesamte Leerraum in den HTML-Dateien alle reduziert werden würde, 283 00:22:58,715 --> 00:23:04,670 so dass die [unhörbar] nur den minimalen HTML-Code dort enthalten. 284 00:23:04,670 --> 00:23:08,095 Die Änderung entfernt im Wesentlichen 285 00:23:08,095 --> 00:23:12,390 alle fremden Zeichen aus den „htmlmin“ -Dateien. 286 00:23:12,390 --> 00:23:16,570 Jetzt geben wir auch das Wörterbuch von Dateien an, 287 00:23:16,570 --> 00:23:18,880 die Dateien, die konfiguriert werden müssen. 288 00:23:18,880 --> 00:23:22,910 Dies wird als Ziel, Doppelpunkt, Quelle angegeben. 289 00:23:22,910 --> 00:23:28,835 Also geben wir „dist/index.html“ an: „dist/index.html“, 290 00:23:28,835 --> 00:23:32,335 was bedeutet, dass die „index.html“ im Distributionsordner 291 00:23:32,335 --> 00:23:36,900 [unhörbar] ist und dann in die „index.html“ -Datei 292 00:23:36,900 --> 00:23:39,025 auch im Distributionsordner zurückgesetzt wird. 293 00:23:39,025 --> 00:23:45,290 In ähnlicher Weise wird die dort angegebene „contactus.html“ und dann die 294 00:23:45,290 --> 00:23:51,965 „aboutus.html“ auch angegeben, wie in dieser Liste von Dateien gezeigt. 295 00:23:51,965 --> 00:23:56,760 Der Grund, warum wir „htmlmin“ ausführen, nachdem wir „usemin“ beendet haben, 296 00:23:56,760 --> 00:24:01,985 ist, weil „usemin“ alle Skripte durch 297 00:24:01,985 --> 00:24:06,925 die Hauptdatei „.js“ ersetzt und auch all diesen 298 00:24:06,925 --> 00:24:12,535 CSS-Code verkettet und kombiniert und durch die Hauptdatei „.css“ ersetzt wird. 299 00:24:12,535 --> 00:24:15,490 So wird das „htmlmin“ auf 300 00:24:15,490 --> 00:24:20,840 den resultierenden HTML-Dateien ausgeführt, nachdem „usemin“ seine Arbeit abgeschlossen hat. 301 00:24:20,840 --> 00:24:24,605 So funktioniert das in Grunt. 302 00:24:24,605 --> 00:24:31,060 Das Grunt „htmlmin“ muss also angewendet werden, nachdem das „Usemin“ seine Arbeit abgeschlossen hat. 303 00:24:31,060 --> 00:24:34,080 Also, sobald alle diese konfiguriert sind, 304 00:24:34,080 --> 00:24:40,185 dann ist ein kleiner Schritt, den ich tun muss, hier zurück zu gehen, 305 00:24:40,185 --> 00:24:45,285 und dann, wo wir für die „jit-grunt“ angeben, 306 00:24:45,285 --> 00:24:50,005 müssen wir angeben, dass diese „jit-grunt“, 307 00:24:50,005 --> 00:24:53,290 Sie erinnern sich, dass wir etwas namens 308 00:24:53,290 --> 00:24:57,500 „UseMinPreparate“ [unhörbar] eingeführt haben, so dass Sie informieren Sie das „jit-grunt“ 309 00:24:57,500 --> 00:25:01,900 sagen, dass die „UseMinPrepare“ -Konfiguration, die wir eingeführt haben 310 00:25:01,900 --> 00:25:06,430 , von diesem „grunt-usemin“ -Plugin selbst behandelt wird. 311 00:25:06,430 --> 00:25:08,575 Also muss ich explizit angeben, 312 00:25:08,575 --> 00:25:14,260 sonst wird sich „jit-grunt“ nach einem „UseMinPrepare“ Grunt-Plugin umsehen. 313 00:25:14,260 --> 00:25:16,480 Um das zu spezifizieren, 314 00:25:16,480 --> 00:25:26,450 würde ich „UseMinPrepare“ sagen und „grunt-usemin“ sagen, 315 00:25:26,450 --> 00:25:30,950 im Wesentlichen „jit-grunt“ sagen, dass „UseMinPrepare“ 316 00:25:30,950 --> 00:25:35,960 vom „grunt-usemin“ -Plugin dort behandelt wird. 317 00:25:35,960 --> 00:25:41,490 Lassen Sie uns schließlich die „Build“ -Task am unteren Rand neu konfigurieren. 318 00:25:41,490 --> 00:25:46,520 Ich gehe zu dieser „Build“ -Aufgabe nach „Imagemin“. 319 00:25:46,520 --> 00:25:49,530 Also haben wir „sauber“, „kopieren“, „imagemin“ gemacht, 320 00:25:49,530 --> 00:25:55,920 dann ist die nächste Aufgabe, die ich ausführen sollte, „UseMinPrepare“ und dann nach 321 00:25:55,920 --> 00:26:08,820 „UseMinPrepare“ führen Sie „contact“ aus, dann führe ich „cssmin“ aus, 322 00:26:08,820 --> 00:26:15,305 dann führe ich „uglify“ aus. 323 00:26:15,305 --> 00:26:20,285 Sie sehen also, dass wir sie in einem bestimmten Satz von Schritten tun müssen. 324 00:26:20,285 --> 00:26:22,395 Sobald die „cssmin“ und „uglify“ ausgeführt 325 00:26:22,395 --> 00:26:26,110 werden, würden die Hauptdateien „.css“ und die Hauptdateien „.js“ erstellt. 326 00:26:26,110 --> 00:26:28,610 An diesem Punkt werde ich den 327 00:26:28,610 --> 00:26:37,290 „filerev“ ausführen und dann schließlich die „usemin“ -Task ausführen. 328 00:26:37,290 --> 00:26:40,475 So sehen Sie die Geheimnisse: „sauber“, „kopieren“, 329 00:26:40,475 --> 00:26:43,690 „imagemin“, „UseMinPreparate“, „concat“, „cssmin“, „hässlich“. 330 00:26:43,690 --> 00:26:47,210 An diesem Punkt sind die Dateien „.css“ und „.js“, 331 00:26:47,210 --> 00:26:49,815 die Hauptdateien „.css“ und „.js“ bereit. 332 00:26:49,815 --> 00:26:54,190 Ich kann das „filerev“ auf ihnen machen und dann endlich das „usemin“ ausführen. 333 00:26:54,190 --> 00:26:58,790 Aber das, speichern wir die Änderungen und dann gehen und 334 00:26:58,790 --> 00:27:03,960 sehen, wie die „Build“ -Aufgabe tatsächlich die Verteilung vorbereitet. 335 00:27:03,960 --> 00:27:06,855 [ unhörbar] Gehe zu unserem Terminal, 336 00:27:06,855 --> 00:27:13,605 tippe ich an der Eingabeaufforderung „grunt build“ und warte dann, bis alle Aufgaben ausgeführt werden. 337 00:27:13,605 --> 00:27:16,870 Sie würden also sehen, dass es alle Aufgaben durchlaufen wird, 338 00:27:16,870 --> 00:27:19,320 und dann, wenn es fertig ist, 339 00:27:19,320 --> 00:27:24,950 wird es einfach angeben, dass alle Aufgaben erledigt sind. 340 00:27:24,950 --> 00:27:29,345 Wenn Sie also zurückgehen und sich die Reihenfolge der erledigten Aufgaben ansehen möchten, 341 00:27:29,345 --> 00:27:31,760 können Sie einfach zurückscrollen und sehen, was es tut. 342 00:27:31,760 --> 00:27:33,885 Es reinigt zuerst, 343 00:27:33,885 --> 00:27:36,765 dann kopiert es die HTML-Dateien, 344 00:27:36,765 --> 00:27:38,400 dann kopiert es die Schriftdateien, 345 00:27:38,400 --> 00:27:40,455 dann macht es die Aufgabe „imagemin“, 346 00:27:40,455 --> 00:27:42,550 dann macht es die „UseMinPreparate“, 347 00:27:42,550 --> 00:27:45,810 dann macht es das „concat“, 348 00:27:45,830 --> 00:27:49,645 dann macht es die „cssmin“, 349 00:27:49,645 --> 00:27:52,010 sowohl die Verteilung als auch die generierte, 350 00:27:52,010 --> 00:27:54,130 und dann macht es die“ uglify“, 351 00:27:54,130 --> 00:28:01,060 dann „uglify“ Aufgabe, dann führt es die „filerev“ und dann schließlich die „usemin“ Aufgabe aus. 352 00:28:01,060 --> 00:28:03,920 Und dann sollte unser Distributions-Ordner jetzt bereit sein. Wenn Sie 353 00:28:03,920 --> 00:28:07,775 zu unserem Editor gehen, 354 00:28:07,775 --> 00:28:11,070 sehen Sie jetzt, dass der Distributionsordner vorbereitet wurde. 355 00:28:11,070 --> 00:28:19,415 Schauen wir uns speziell die Hauptdateien „.css“ und „.js“ an. 356 00:28:19,415 --> 00:28:22,060 Notieren Sie sich die Namen dieser Dateien. 357 00:28:22,060 --> 00:28:23,590 Beachten Sie, dass 358 00:28:23,590 --> 00:28:25,080 es nach main einen Punkt gibt und dann 359 00:28:25,080 --> 00:28:30,500 einen 20-stelligen Hash gibt, der hier von „filerev“ hinzugefügt wurde. 360 00:28:30,500 --> 00:28:34,605 Was passiert, ist, wenn ich einen neuen Distributionsordner 361 00:28:34,605 --> 00:28:41,130 vorbereite, ändert sich dieser Hash jedes Mal, wenn ich den neuen Distributionsordner vorbereite, 362 00:28:41,130 --> 00:28:47,515 was bedeutet, dass jedes Mal, wenn ich eine neue Version meiner Website bereitstelle, 363 00:28:47,515 --> 00:28:54,130 wenn irgendwelche Browser zuvor meine Website angesehen haben, ihre Cache-Einträge, 364 00:28:54,130 --> 00:28:57,210 wo sie könnte das Haupt „.css“ zwischengespeichert haben und Haupt „.js“ ist 365 00:28:57,210 --> 00:29:02,195 ungültig geworden, weil wir eine neue Version der Haupt „.css“ und „.js“ haben. 366 00:29:02,195 --> 00:29:06,805 So wird der Browser diese Dinge erneut herunterladen. 367 00:29:06,805 --> 00:29:10,455 Ich habe das „filerev“ nicht mit den NPM-Skripten gezeigt, 368 00:29:10,455 --> 00:29:15,940 aber ich habe es gerade hier hinzugefügt, nur um Ihnen zu zeigen, wie es mit dem Grunt gemacht wird. 369 00:29:15,940 --> 00:29:19,650 Damit schließen wir diese Übung ab. 370 00:29:19,650 --> 00:29:26,035 Werfen wir einen kurzen Blick auf die Website in unserem Browser. Wenn Sie 371 00:29:26,035 --> 00:29:27,795 zu Ihrem Browser gehen, 372 00:29:27,795 --> 00:29:32,035 können Sie sehen, dass ich jetzt in „dist/index.html“ lade. 373 00:29:32,035 --> 00:29:34,200 Das ist also aus dem Distributionsordner, 374 00:29:34,200 --> 00:29:39,260 also schaue ich aus und es sieht gut aus. 375 00:29:39,260 --> 00:29:44,440 Die „aboutus.html“ sieht auch gut aus, genau wie zuvor. 376 00:29:44,440 --> 00:29:51,060 Und die Kontaktseite sieht auch gut vorbereitet für die Bereitstellung aus. 377 00:29:51,060 --> 00:29:54,970 Damit schließen wir diese Übung ab. 378 00:29:54,970 --> 00:29:57,365 Nach all dem Grunzen 379 00:29:57,365 --> 00:30:00,560 musst du dir sicher den Atem holen. 380 00:30:00,560 --> 00:30:09,400 Bevor Sie das tun, stellen Sie sicher, einen guten Kommentar mit der Nachricht „Grunzen Teil zwei“ zu machen.