[MUSIC]
Bisher haben wir uns auf die Gestaltung und
Implementierung unserer Website konzentriert, sei es HTML, CSS oder JavaScript Code.
Sobald Ihre Website bereit ist, ist der nächste Schritt in der Lage, Ihre Website
zu erstellen und sie auf einem Webserver bereitzustellen, so dass sie öffentlich verfügbar wird.
Dann unsere zweite Reihe von Schritten, die wir durchlaufen müssen, bevor
Ihre Website für die Bereitstellung auf einem Webserver bereit ist.
Das ist, was wir in dieser und der nächsten Lektion betrachten werden.
Wie ich bereits erwähnt habe,
beinhaltet die Webentwicklung und -bereitstellung viele sich wiederholende Aufgaben.
Offensichtlich ist das Schreiben des HTML/CSS und JavaScript-Codes ein Teil davon.
Aber der andere Teil ist die Tatsache, dass, wenn Sie
den CSS-Code mit einer der CSS-Vorverarbeitungssprachen wie Sass oder
Less schreiben, Sie diesen Code in den entsprechenden CSS-Code konvertieren müssen.
Danach müssen Sie zusätzliche Verarbeitung Ihrer
CSS-Dateien wie Verkleinerung, Verdichtung und Verkettung durchführen.
Wir werden in den nächsten Folien ein wenig mehr darüber reden.
In ähnlicher Weise müssen Sie mit Ihrem JavaScript-Code
JShinting durchführen und auf potenzielle Fehler überprüfen.
Dann Verkettung verschiedener Skriptdateien und
dann sogar Hässlichkeit und das Mangling des Codes.
Wir werden in den nächsten Folien ein wenig darüber reden.
All diese Aufgaben sind sich wiederholende Aufgaben, die wir so
weit wie möglich automatisieren möchten, damit wir uns auf das eigentliche Design und den
Aufbau unserer Website konzentrieren können, anstatt auf diese sich wiederholenden Aufgaben.
Damit das DRY-Prinzip, wiederholen Sie sich nicht Prinzip,
ist in diesem Fall sehr wichtig.
Wir wollen unsere Zeit nicht mit solchen repetitiven Verbrennungsaufgaben verschwenden
und versuchen stattdessen, sie so weit wie möglich zu automatisieren
, damit sie bei Bedarf ausgeführt werden können.
Lassen Sie uns über einige dieser sich wiederholenden Aufgaben ein wenig detaillierter sprechen.
Nehmen wir das Beispiel von CSS als Fall.
Wenn wir CSS-Code schreiben, schreiben wir oft den Code
mit einer der Vorverarbeitungssprachen wie Less oder Sass.
Sobald der Code geschrieben ist, muss er in CSS konvertiert werden, indem
man einen der Präprozessoren verwendet, wie wir in der vorherigen Lektion gesehen haben.
Dort müssen wir möglicherweise einige herstellerspezifische Präfixierung für
unseren CSS-Code durchführen, um die Probleme zu beheben, die mit verschiedenen Browsern auftreten könnten.
Hier wird also die Aufgabe des automatischen Präfixierens verwendet,
wodurch dies automatisch für uns erledigt werden kann.
In ähnlicher Weise ist, sobald Ihr CSS-Code geschrieben ist, offensichtlich
die Art und Weise, wie wir CSS-Code schreiben, menschlich lesbar zu sein.
Aber für eine Maschine ist es nicht wirklich egal, ob
zwischen dem Code genügend Leerzeichen vorhanden sind oder ob er richtig formatiert ist oder nicht.
So ist die Minifizierung der Prozess, alle unnötigen Zeichen,
den Leerraum, Zeilenumbrüche, Kommentare, aus Ihrem CSS-Code zu entfernen.
So dass Ihr Endergebnis eine sehr kompakte Datei mit minimaler Anzahl
von Zeichen ist, so dass sehr, sehr schnell bereitgestellt werden kann.
Gleichzeitig
möchten Sie jedoch die Funktionalität beibehalten, die Sie in Ihrem CSS-Code entworfen haben.
In ähnlicher Weise können Sie Ihren CSS-Code in viele Dateien verteilen,
während Sie Ihre Website entwerfen und erstellen.
Möglicherweise möchten Sie alle in einer einzigen CSS-Datei am Ende verketten,
so dass nur eine einzelne CSS-Datei
vom Browser heruntergeladen werden muss, wenn es Ihre Website rendert. Die
Verkettung ist also
eine weitere Aufgabe, die beim Erstellen Ihrer Website involviert ist.
Ähnlich, wenn Sie JavaScript-Code schreiben, ob es sich um reines JavaScript
oder jQuery oder eines der Frameworks handelt, die wir in
den zukünftigen Kursen dieser Spezialisierung verwenden werden, müssten Sie JavaScript-Code schreiben.
Sobald Sie also den JavaScript-Code geschrieben haben, sollten Sie in der Lage sein,
den JavaScript-Code auf Fehler und mögliche Probleme zu überprüfen.
Dinge wie fehlende Semikolons,
unsachgemäße Verwendung der Sprache, und so weiter, so was wir als statische Code-Analyse nennen.
Also, wenn Sie in der Lage sein wollen, dies zu tun, noch bevor wir unsere
Website auf dem Webserver bereitstellen.
In ähnlicher Weise können wir unseren Code in mehrere JavaScript-Dateien organisieren.
Wenn wir tatsächlich bereitstellen, möchten wir möglicherweise alle diese Dateien in
einer einzigen JavaScript-Datei verketten und diese dann auf unseren Webseiten verwenden.
Und diese Verkettung kann automatisch erfolgen.
In ähnlicher Weise die Hässlichkeit des JavaScript-Codes, der für die
Verminderung steht, was bedeutet, dass alle unnötigen Leerräume und
Kommentare entfernt werden und so weiter.
Und Mangling des Codes, was bedeutet, die Namen der lokalen
Variablen auf einzelne Buchstaben zu reduzieren, wo immer möglich.
Aus der Sicht eines Computers
ist es jetzt egal, wie der Code aussieht, solange er richtig funktioniert.
Für ein menschliches lesbares Format schreiben wir natürlich Code in viel
aufwendiger Weise, so dass es einfacher für uns ist zu folgen, was der Code tut.
Wenn Sie also tatsächlich bereitstellen,
möchten Sie möglicherweise alle fremden Funktionen aus Ihrem Code entfernen.
Und dann komprimieren Sie es, so dass die minimale Menge an Code bereitgestellt wird.
Gleichzeitig möchten
Sie nach Abschluss des JSHint-Verkettungs- und Hässlichkeitsprozesses möglicherweise immer noch sicherstellen, dass Ihr resultierender Code weiterhin korrekt funktioniert.
Daher möchten Sie Ihren Code möglicherweise erneut auf mögliche Fehler überprüfen.
CSS und JavaScript sind zwei wichtige Aspekte Ihrer Webentwicklung,
auf die Sie offensichtlich viel Aufmerksamkeit schenken müssen.
Es gibt jedoch noch viele andere kleinere Aufgaben, die Sie ausführen müssen,
bevor Ihre Website für die Bereitstellung bereit ist.
Möglicherweise fügen Sie viele Bilder in Ihre Webseiten ein.
Sobald Ihre Website bereit ist, können Sie diese Bilder komprimieren
, so dass Sie die Dateigrößen optimieren,
sodass ihre Bilder Dateien mit minimaler Größe bereitgestellt werden.
In ähnlicher Weise können Sie während der Entwicklung Änderungen vornehmen
, beispielsweise an Ihren SAS-Dateien oder Ihrem JavaScript-Code.
Wenn solche Änderungen vorgenommen werden,
möchten Sie in der Lage sein, diese Aufgaben,
wie Verkettung, Verminderung und Hässlichkeit, automatisch auszuführen.
So könnten wir Watch-Aufgaben verwenden,
deren Hauptaufgabe es ist, all diese Dateien zu überwachen.
Und wenn Änderungen an diesen Dateien vorgenommen werden,
werden die Aufgaben automatisch ausgeführt.
Dies wird viel Zeit davon abhalten, sich wiederholende Aufgaben manuell zu erledigen.
Wir werden einige davon in den folgenden Übungen genauer betrachten.
Ein weiterer Aspekt
ist, während Sie Ihre Entwicklung durchführen, in der Lage zu sein, Ihren Code bereitzustellen und
den Code in Ihrem Browser zu beobachten.
So haben wir die Verwendung des Live-Servers in unserer vorherigen Entwicklung gesehen,
wo wir den Server einsatzbereit hatten und den Code bereitstellten.
Damit wir sehen können, dass die Änderungen, die wir sofort machen,
im Browser gerendert werden.
Also, dafür brauchen wir Server und Livereload Mechanismus, und
Live-Server, die wir früher gesehen haben, ist ein solches Beispiel dafür, wie wir dies erreichen können.
Schließlich, wenn Sie Code schreiben, müssen Sie offensichtlich
Ihren Code testen, was im Fall von Bootstrap viel weniger berücksichtigt wird.
Aber während Sie verschiedene JavaScript-Frameworks verwenden,
wird das Testen zu einer ebenso wichtigen Aufgabe.
Schließlich möchten Sie in der Lage sein, alle diese Aufgaben zu erledigen und
dann Ihren endgültigen Bereitstellungscode zu erstellen, der dann
auf Ihren Webserver hochgeladen werden kann, um Ihre Website für die allgemeine Öffentlichkeit zugänglich zu machen.
Die Schritte beim Aufbau Ihrer Website für die Bereitstellung, was wir
als Aufbau der Distributionsdateien nennen, sind ebenfalls eine ebenso wichtige Aufgabe.
Wir werden einige dieser Beispiele in der nächsten Übung und
auch in der nächsten Lektion betrachten, in der wir uns Task-Läufer ansehen.
( MUSIK)