1
00:00:00,000 --> 00:00:04,674
[MUSIC]

2
00:00:04,674 --> 00:00:08,968
Bisher haben wir uns auf die Gestaltung und

3
00:00:08,968 --> 00:00:14,540
Implementierung unserer Website konzentriert, sei es HTML, CSS oder JavaScript Code.

4
00:00:16,170 --> 00:00:21,890
Sobald Ihre Website bereit ist, ist der nächste Schritt in der Lage, Ihre Website

5
00:00:21,890 --> 00:00:26,010
zu erstellen und sie auf einem Webserver bereitzustellen, so dass sie öffentlich verfügbar wird.

6
00:00:27,300 --> 00:00:30,750
Dann unsere zweite Reihe von Schritten, die wir durchlaufen müssen, bevor

7
00:00:30,750 --> 00:00:34,580
Ihre Website für die Bereitstellung auf einem Webserver bereit ist.

8
00:00:34,580 --> 00:00:39,079
Das ist, was wir in dieser und der nächsten Lektion betrachten werden.

9
00:00:40,915 --> 00:00:43,479
Wie ich bereits erwähnt habe,

10
00:00:43,479 --> 00:00:47,870
beinhaltet die Webentwicklung und -bereitstellung viele sich wiederholende Aufgaben.

11
00:00:47,870 --> 00:00:54,820
Offensichtlich ist das Schreiben des HTML/CSS und JavaScript-Codes ein Teil davon.

12
00:00:54,820 --> 00:00:57,600
Aber der andere Teil ist die Tatsache, dass, wenn Sie

13
00:00:59,200 --> 00:01:04,170
den CSS-Code mit einer der CSS-Vorverarbeitungssprachen wie Sass oder

14
00:01:04,170 --> 00:01:09,200
Less schreiben, Sie diesen Code in den entsprechenden CSS-Code konvertieren müssen.

15
00:01:09,200 --> 00:01:14,614
Danach müssen Sie zusätzliche Verarbeitung Ihrer

16
00:01:14,614 --> 00:01:20,810
CSS-Dateien wie Verkleinerung, Verdichtung und Verkettung durchführen.

17
00:01:20,810 --> 00:01:24,850
Wir werden in den nächsten Folien ein wenig mehr darüber reden.

18
00:01:24,850 --> 00:01:30,090
In ähnlicher Weise müssen Sie mit Ihrem JavaScript-Code

19
00:01:30,090 --> 00:01:34,580
JShinting durchführen und auf potenzielle Fehler überprüfen.

20
00:01:34,580 --> 00:01:40,590
Dann Verkettung verschiedener Skriptdateien und

21
00:01:40,590 --> 00:01:45,100
dann sogar Hässlichkeit und das Mangling des Codes.

22
00:01:45,100 --> 00:01:49,240
Wir werden in den nächsten Folien ein wenig darüber reden.

23
00:01:49,240 --> 00:01:54,889
All diese Aufgaben sind sich wiederholende Aufgaben, die wir so

24
00:01:54,889 --> 00:02:00,536
weit wie möglich automatisieren möchten, damit wir uns auf das eigentliche Design und den

25
00:02:00,536 --> 00:02:05,730
Aufbau unserer Website konzentrieren können, anstatt auf diese sich wiederholenden Aufgaben.

26
00:02:05,730 --> 00:02:09,623
Damit das DRY-Prinzip, wiederholen Sie sich nicht Prinzip,

27
00:02:09,623 --> 00:02:11,840
ist in diesem Fall sehr wichtig.

28
00:02:11,840 --> 00:02:16,840
Wir wollen unsere Zeit nicht mit solchen repetitiven Verbrennungsaufgaben verschwenden

29
00:02:16,840 --> 00:02:20,140
und versuchen stattdessen, sie so weit wie möglich zu automatisieren

30
00:02:20,140 --> 00:02:23,410
, damit sie bei Bedarf ausgeführt werden können.

31
00:02:23,410 --> 00:02:27,649
Lassen Sie uns über einige dieser sich wiederholenden Aufgaben ein wenig detaillierter sprechen.

32
00:02:28,950 --> 00:02:33,580
Nehmen wir das Beispiel von CSS als Fall.

33
00:02:33,580 --> 00:02:37,470
Wenn wir CSS-Code schreiben, schreiben wir oft den Code

34
00:02:37,470 --> 00:02:41,440
mit einer der Vorverarbeitungssprachen wie Less oder Sass.

35
00:02:41,440 --> 00:02:46,920
Sobald der Code geschrieben ist, muss er in CSS konvertiert werden, indem

36
00:02:46,920 --> 00:02:52,460
man einen der Präprozessoren verwendet, wie wir in der vorherigen Lektion gesehen haben.

37
00:02:54,130 --> 00:02:59,660
Dort müssen wir möglicherweise einige herstellerspezifische Präfixierung für

38
00:02:59,660 --> 00:03:06,300
unseren CSS-Code durchführen, um die Probleme zu beheben, die mit verschiedenen Browsern auftreten könnten.

39
00:03:06,300 --> 00:03:12,599
Hier wird also die Aufgabe des automatischen Präfixierens verwendet,

40
00:03:12,599 --> 00:03:16,980
wodurch dies automatisch für uns erledigt werden kann.

41
00:03:16,980 --> 00:03:20,430
In ähnlicher Weise ist, sobald Ihr CSS-Code geschrieben ist, offensichtlich

42
00:03:20,430 --> 00:03:26,010
die Art und Weise, wie wir CSS-Code schreiben, menschlich lesbar zu sein.

43
00:03:26,010 --> 00:03:30,550
Aber für eine Maschine ist es nicht wirklich egal, ob

44
00:03:30,550 --> 00:03:34,000
zwischen dem Code genügend Leerzeichen vorhanden sind oder ob er richtig formatiert ist oder nicht.

45
00:03:35,100 --> 00:03:41,274
So ist die Minifizierung der Prozess, alle unnötigen Zeichen,

46
00:03:41,274 --> 00:03:46,080
den Leerraum, Zeilenumbrüche, Kommentare, aus Ihrem CSS-Code zu entfernen.

47
00:03:46,080 --> 00:03:51,280
So dass Ihr Endergebnis eine sehr kompakte Datei mit minimaler Anzahl

48
00:03:51,280 --> 00:03:56,306
von Zeichen ist, so dass sehr, sehr schnell bereitgestellt werden kann.

49
00:03:56,306 --> 00:03:57,812
Gleichzeitig

50
00:03:57,812 --> 00:04:03,099
möchten Sie jedoch die Funktionalität beibehalten, die Sie in Ihrem CSS-Code entworfen haben.

51
00:04:04,550 --> 00:04:09,140
In ähnlicher Weise können Sie Ihren CSS-Code in viele Dateien verteilen,

52
00:04:09,140 --> 00:04:12,870
während Sie Ihre Website entwerfen und erstellen.

53
00:04:12,870 --> 00:04:17,620
Möglicherweise möchten Sie alle in einer einzigen CSS-Datei am Ende verketten,

54
00:04:17,620 --> 00:04:21,430
so dass nur eine einzelne CSS-Datei

55
00:04:21,430 --> 00:04:25,290
vom Browser heruntergeladen werden muss, wenn es Ihre Website rendert. Die

56
00:04:25,290 --> 00:04:27,150
Verkettung ist also

57
00:04:27,150 --> 00:04:32,340
eine weitere Aufgabe, die beim Erstellen Ihrer Website involviert ist.

58
00:04:33,660 --> 00:04:38,940
Ähnlich, wenn Sie JavaScript-Code schreiben, ob es sich um reines JavaScript

59
00:04:38,940 --> 00:04:44,800
oder jQuery oder eines der Frameworks handelt, die wir in

60
00:04:44,800 --> 00:04:50,640
den zukünftigen Kursen dieser Spezialisierung verwenden werden, müssten Sie JavaScript-Code schreiben.

61
00:04:50,640 --> 00:04:53,550
Sobald Sie also den JavaScript-Code geschrieben haben, sollten Sie in der Lage sein,

62
00:04:53,550 --> 00:04:57,510
den JavaScript-Code auf Fehler und mögliche Probleme zu überprüfen.

63
00:04:57,510 --> 00:05:00,576
Dinge wie fehlende Semikolons,

64
00:05:02,810 --> 00:05:09,030
unsachgemäße Verwendung der Sprache, und so weiter, so was wir als statische Code-Analyse nennen.

65
00:05:09,030 --> 00:05:13,490
Also, wenn Sie in der Lage sein wollen, dies zu tun, noch bevor wir unsere

66
00:05:14,830 --> 00:05:18,180
Website auf dem Webserver bereitstellen.

67
00:05:18,180 --> 00:05:23,379
In ähnlicher Weise können wir unseren Code in mehrere JavaScript-Dateien organisieren.

68
00:05:23,379 --> 00:05:28,135
Wenn wir tatsächlich bereitstellen, möchten wir möglicherweise alle diese Dateien in

69
00:05:28,135 --> 00:05:33,515
einer einzigen JavaScript-Datei verketten und diese dann auf unseren Webseiten verwenden.

70
00:05:33,515 --> 00:05:36,775
Und diese Verkettung kann automatisch erfolgen.

71
00:05:36,775 --> 00:05:42,340
In ähnlicher Weise die Hässlichkeit des JavaScript-Codes, der für die

72
00:05:42,340 --> 00:05:46,720
Verminderung steht, was bedeutet, dass alle unnötigen Leerräume und

73
00:05:46,720 --> 00:05:48,880
Kommentare entfernt werden und so weiter.

74
00:05:48,880 --> 00:05:53,670
Und Mangling des Codes, was bedeutet, die Namen der lokalen

75
00:05:53,670 --> 00:05:58,100
Variablen auf einzelne Buchstaben zu reduzieren, wo immer möglich.

76
00:05:58,100 --> 00:06:01,562
Aus der Sicht eines Computers

77
00:06:01,562 --> 00:06:06,790
ist es jetzt egal, wie der Code aussieht, solange er richtig funktioniert.

78
00:06:06,790 --> 00:06:12,230
Für ein menschliches lesbares Format schreiben wir natürlich Code in viel

79
00:06:12,230 --> 00:06:17,960
aufwendiger Weise, so dass es einfacher für uns ist zu folgen, was der Code tut.

80
00:06:17,960 --> 00:06:19,620
Wenn Sie also tatsächlich bereitstellen,

81
00:06:19,620 --> 00:06:23,460
möchten Sie möglicherweise alle fremden Funktionen aus Ihrem Code entfernen.

82
00:06:23,460 --> 00:06:29,226
Und dann komprimieren Sie es, so dass die minimale Menge an Code bereitgestellt wird.

83
00:06:29,226 --> 00:06:37,200
Gleichzeitig möchten

84
00:06:37,200 --> 00:06:41,990
Sie nach Abschluss des JSHint-Verkettungs- und Hässlichkeitsprozesses möglicherweise immer noch sicherstellen, dass Ihr resultierender Code weiterhin korrekt funktioniert.

85
00:06:41,990 --> 00:06:46,490
Daher möchten Sie Ihren Code möglicherweise erneut auf mögliche Fehler überprüfen.

86
00:06:47,550 --> 00:06:52,127
CSS und JavaScript sind zwei wichtige Aspekte Ihrer Webentwicklung,

87
00:06:52,127 --> 00:06:55,640
auf die Sie offensichtlich viel Aufmerksamkeit schenken müssen.

88
00:06:55,640 --> 00:06:59,640
Es gibt jedoch noch viele andere kleinere Aufgaben, die Sie ausführen müssen,

89
00:06:59,640 --> 00:07:02,870
bevor Ihre Website für die Bereitstellung bereit ist.

90
00:07:02,870 --> 00:07:08,601
Möglicherweise fügen Sie viele Bilder in Ihre Webseiten ein.

91
00:07:08,601 --> 00:07:14,574
Sobald Ihre Website bereit ist, können Sie diese Bilder komprimieren

92
00:07:14,574 --> 00:07:17,881
, so dass Sie die Dateigrößen optimieren,

93
00:07:17,881 --> 00:07:23,440
sodass ihre Bilder Dateien mit minimaler Größe bereitgestellt werden.

94
00:07:24,510 --> 00:07:30,310
In ähnlicher Weise können Sie während der Entwicklung Änderungen vornehmen

95
00:07:30,310 --> 00:07:35,580
, beispielsweise an Ihren SAS-Dateien oder Ihrem JavaScript-Code.

96
00:07:35,580 --> 00:07:38,268
Wenn solche Änderungen vorgenommen werden,

97
00:07:38,268 --> 00:07:42,748
möchten Sie in der Lage sein, diese Aufgaben,

98
00:07:42,748 --> 00:07:47,990
wie Verkettung, Verminderung und Hässlichkeit, automatisch auszuführen.

99
00:07:47,990 --> 00:07:52,110
So könnten wir Watch-Aufgaben verwenden,

100
00:07:52,110 --> 00:07:56,480
deren Hauptaufgabe es ist, all diese Dateien zu überwachen.

101
00:07:56,480 --> 00:07:59,340
Und wenn Änderungen an diesen Dateien vorgenommen werden,

102
00:07:59,340 --> 00:08:03,070
werden die Aufgaben automatisch ausgeführt.

103
00:08:03,070 --> 00:08:09,260
Dies wird viel Zeit davon abhalten, sich wiederholende Aufgaben manuell zu erledigen.

104
00:08:10,610 --> 00:08:15,320
Wir werden einige davon in den folgenden Übungen genauer betrachten.

105
00:08:16,660 --> 00:08:22,060
Ein weiterer Aspekt

106
00:08:22,060 --> 00:08:25,940
ist, während Sie Ihre Entwicklung durchführen, in der Lage zu sein, Ihren Code bereitzustellen und

107
00:08:25,940 --> 00:08:30,570
den Code in Ihrem Browser zu beobachten.

108
00:08:30,570 --> 00:08:37,960
So haben wir die Verwendung des Live-Servers in unserer vorherigen Entwicklung gesehen,

109
00:08:37,960 --> 00:08:42,330
wo wir den Server einsatzbereit hatten und den Code bereitstellten.

110
00:08:42,330 --> 00:08:46,530
Damit wir sehen können, dass die Änderungen, die wir sofort machen,

111
00:08:48,230 --> 00:08:51,020
im Browser gerendert werden.

112
00:08:51,020 --> 00:08:55,549
Also, dafür brauchen wir Server und Livereload Mechanismus, und

113
00:08:55,549 --> 00:09:01,340
Live-Server, die wir früher gesehen haben, ist ein solches Beispiel dafür, wie wir dies erreichen können.

114
00:09:02,740 --> 00:09:07,850
Schließlich, wenn Sie Code schreiben, müssen Sie offensichtlich

115
00:09:07,850 --> 00:09:14,210
Ihren Code testen, was im Fall von Bootstrap viel weniger berücksichtigt wird.

116
00:09:14,210 --> 00:09:18,930
Aber während Sie verschiedene JavaScript-Frameworks verwenden,

117
00:09:18,930 --> 00:09:21,915
wird das Testen zu einer ebenso wichtigen Aufgabe.

118
00:09:23,190 --> 00:09:28,680
Schließlich möchten Sie in der Lage sein, alle diese Aufgaben zu erledigen und

119
00:09:28,680 --> 00:09:34,250
dann Ihren endgültigen Bereitstellungscode zu erstellen, der dann

120
00:09:34,250 --> 00:09:40,790
auf Ihren Webserver hochgeladen werden kann, um Ihre Website für die allgemeine Öffentlichkeit zugänglich zu machen.

121
00:09:42,450 --> 00:09:48,115
Die Schritte beim Aufbau Ihrer Website für die Bereitstellung, was wir

122
00:09:48,115 --> 00:09:53,950
als Aufbau der Distributionsdateien nennen, sind ebenfalls eine ebenso wichtige Aufgabe.

123
00:09:53,950 --> 00:09:59,754
Wir werden einige dieser Beispiele in der nächsten Übung und

124
00:09:59,754 --> 00:10:04,470
auch in der nächsten Lektion betrachten, in der wir uns Task-Läufer ansehen.

125
00:10:04,470 --> 00:10:10,569
( MUSIK)