Hallo!
In diesem Tutorial zeige ich Ihnen, wie Sie die Arbeit im Team optimieren können dank der Integration von Git direkt in Dreamweaver.
Unterstützt werden alle Git-Dienste, z.
B.
GitHub oder Bitbucket, zur Verwaltung von Open-Source-Projekten oder zur Verfolgung und Verwaltung von Änderungen in eigenen Projekten – inkl.
Versionskontrolle.
Bevor wir in Dreamweaver loslegen, müssen Sie einen Git-Client auf Ihrem Mac oder PC installieren.
Außerdem müssen Sie ein neues Konto für ein Git-Repository bzw. ein vorhandenes einrichten.
Ich verwende GitHub.
Um Dreamweaver mit einem Git-Repository zu verbinden, wähle ich „Neue Site“ (New Site) oder „Sites verwalten“ (Manage Sites).
Um Git zu nutzen, muss ich ein Git-Repository mit dieser Site verknüpfen.
Ich habe nun zwei Optionen zur Auswahl.
Ich kann ein Git-Repository auf Basis der Site initialisieren, d. h., ich verwende meine lokale Kopie als Ausgangspunkt.
Oder ich gebe eine URL ein, um ein vorhandenes Git-Repository zu klonen.
Wenn die Quelldateien, die ich verwenden werde, bereits in Bitbucket oder GitHub vorhanden sind, kann ich sie klonen, um auf meinem Computer damit zu arbeiten.
Was Ihnen lieber ist.
Ich möchte ein Git-Repository initialisieren.
Dann klicke ich auf „Speichern“ (Save).
Da Git in Dreamweaver integriert ist, wird diese Option angezeigt.
Damit kann ich von der Dateiansicht zur Git-Ansicht meiner Site wechseln.
Als Erstes wird Ihnen auffallen, dass manche Dateien grün sind.
Diese Dateien wurden noch nicht in das Repository übernommen, und sie werden nicht getrackt.
Im Bedienfeld „Dateien“ (Files) sind Git-Funktionen verfügbar.
Mit einem Rechtsklick öffnen Sie die Optionen.
Mit dieser Option kann ich meine Änderungen bereitstellen (stage) und übernehmen (commit).
Ich werde in der Git-Ansicht arbeiten.
Zu Beginn muss ich einen ersten „Commit“ ausführen und sicherstellen, dass alle Dateien für die Übertragung bereit sind.
Hierfür sind zwei Schritte nötig.
Ich muss die Dateien bereitstellen und danach übernehmen.
Um alle bereitzustellen, aktiviere ich dieses Kontrollkästchen neben „Status“.
Damit wähle ich alle Dateien aus.
Diese Dateien sind jetzt für die Übertragung bereitgestellt.
Ich klicke auf dieses kleine Commit-Symbol, um die bereitgestellten Dateien zu übertragen.
Im Fenster für bereitgestellte Dateien kann ich die Dateien prüfen.
Ich blende den Inhalt für „index.html“ ein.
Wie Sie sehen, ist der gesamte Code grün.
Grün bedeutet, dass dieser Code noch nicht im Repository ist.
Ich blende den Inhalt wieder aus und füge eine Commit-Nachricht hinzu: „First Commit“ (Erster Commit).
Ich klicke auf „OK“.
Unten im Git-Bedienfeld sehe ich: Alles ist aktuell.
Im Bedienfeld „Dateien“ (Files) werden die Dateinamen jetzt in Weiß angezeigt, da sie alle aktuell sind.
Nicht vergessen: Grün bedeutet, dass noch etwas übertragen werden muss.
Ich werde nun einige Änderungen vornehmen.
In der Datei „index.html“ ändere ich „About“ (Über) in „About Us“ (Über uns).
Ich klicke auf „Speichern“ (Save).
Sehen Sie diese farbige Markierung?
Sie dient als visueller Hinweis darauf, dass etwas geändert wurde und die Änderung noch nicht im Repository ist.
Wenn ich darauf klicke, wird eine Vorher-/Nachher-Ansicht angezeigt.
Und auch hier unten kann ich sehen, dass die Datei „index.html“ geändert wurde.
Wenn ich wissen möchte, um welche Änderungen es sich handelt, kann ich auf die Markierung klicken oder auf die Schaltfläche „Versionsvergleich“.
Wenn ich darauf klicke, kann ich ganz genau sehen, was geändert wurde.
Dies wurde entfernt.
Und „About Us“ wurde hinzugefügt.
Wenn ich eine Änderung rückgängig machen möchte, klicke ich im Git-Bedienfeld auf die Schaltfläche „Datei zurücksetzen“, auf dieses letzte Symbol.
Ich aktiviere mein geändertes Dokument und klicke auf „Commit“.
Und ich füge eine Nachricht für mich hinzu.
Wenn ich den Inhalt einblende, werden meine Änderungen hervorgehoben.
Ich klicke auf „OK“.
Die Dateien sind jetzt in meinem lokalen Repository.
Die Markierung ist weg.
Und die Datei wurde aus dem Git-Bedienfeld entfernt.
Wir haben bislang in der Hauptverzweigung (master) gearbeitet.
Sie können zu einer anderen Verzweigung wechseln, indem Sie dieses Dropdown-Menü öffnen.
Sie können neue Verzweigungen erstellen oder vorhandene verwalten, indem Sie auf „Verzweigungen verwalten“ (Manage Branches) klicken.
Ich füge mal eine neue hinzu.
Ich erstelle die Verzeigung „iphone-bug-nav“ und klicke auf „OK“.
Ich habe nun eine neue Verzweigung erstellt.
Ich kann in diesem Fenster auch Verzweigungen zusammenführen und z.
B. die gerade erstellte in die Hauptverzweigung aufnehmen.
Bislang habe ich ein lokales Repository verwendet.
Nehmen wir nun an, ich möchte ein externes nutzen, z.
B.
Bitbucket oder GitHub.
Um eine Verbindung herzustellen, klicke ich auf „Remote-Repository erstellen“ (Create Remote).
Ich gebe einen Namen sowie URL, Benutzernamen und Kennwort ein und klicke auf „OK“.
Unten im Git-Bedienfeld sehen Sie jetzt Symbole zum Übertragen (push), Abrufen (pull) und Herunterladen (fetch).
Ich nehme nun eine kleine Änderung vor und speichere sie im lokalen Repository.
Ich gebe eine Notiz ein.
Dieses kleine Symbol weist darauf hin, dass eine Datei übertragen wird.
Ich klicke auf „OK“.
Die Datei wird an GitHub übertragen.
Das alles geht innerhalb von Dreamweaver CC.
Sehr nützlich finde ich die Anzeige des Git-Repository-Verlaufs (Show repository history).
Hier kann ich sehen, was mein erster Commit war, und viele andere Änderungen, die ich vorgenommen habe.
Toll ist, dass man auch sehen kann, was andere Team-Mitglieder geändert haben.
Hier sieht man den Namen.
Und hier werden Kommentare und Code-Änderungen angezeigt.
Wie Sie sehen, lässt sich hierdurch die Zusammenarbeit mit anderen deutlich vereinfachen.
Dies war nur ein kurzer Überblick über die Git-Integration.
Ausführliche Informationen finden Sie unter dem Link zum Hilfedokument auf dieser Tutorial-Seite.
Dreamweaver CC hat die Arbeit im Team enorm vereinfacht.
Ich hoffe, Sie werden genauso begeistert sein wie ich, wenn Sie Git in Ihren Workflow integrieren.
Danke, Dreamweaver CC.
