Git für Designer

Sie sind wahrscheinlich mit Tools wie Git und Subversion vertraut. Aber als Webdesigner ist es durchaus möglich, dass Sie zwar die Versionskontrolle in Ihren Projekten nutzen, die Wahrheit ist jedoch, dass Sie dies meistens nicht tun.
Wenn Sie zu dieser Beschreibung passen, machen Sie sich keine Sorgen. du bist nicht allein. In der Tat ist es die völlig unerforschte Meinung dieses Autors, dass die große Mehrheit des Webdesigners dies nicht tut! Das Dilemma besteht darin, dass allgemein davon ausgegangen wird, dass die Versionskontrolle nur für Hardcore-Codierer gilt, die ihre Tage in der Dunkelheit verbringen und selten nach Luft fliegen, es sei denn, die Mikrowelle läutet ein und signalisiert, dass die heiße Tasche zum Verzehr bereit ist.

Wenn Sie für das Web kodieren, ob im Frontend oder Backend, ist es in der Pflicht, verantwortungsvoll zu codieren: Versionskontrolle.


5 Anzeichen dafür, dass Sie für die Versionskontrolle überfällig sind

  1. Sie haben keine Vorstellung davon, was Versionskontrolle ist oder warum es nützlich sein könnte.
  2. Sie codieren lokal und haben kein Sicherungssystem.
  3. Sie sichern Ihre Projekte, indem Sie das Stammverzeichnis sporadisch duplizieren.
  4. Sie haben versehentlich eine Datei endgültig gelöscht und mussten von Grund auf neu codieren.
  5. Wenn Sie eine Reihe von Änderungen vornehmen, bricht Ihre Anwendung ab. Dann müssen Sie gedrückt halten Befehl + Z für eine schmerzhafte Anzahl von Sekunden, während Sie beobachten, wie der Editor Ihre Änderungen umkehrt.

Geben Sie es zu: Jeder Entwickler hat sich mit einem der Zeichen identifiziert, die zuvor an der einen oder anderen Stelle seiner Karriere erwähnt wurden. Aber denken Sie daran: Der erste Schritt zur Wiederherstellung besteht darin, ein Problem zuzugeben!


5 Sofortige Vorteile für die Versionskontrolle

  1. Versehentlich die Klasse oder PSD gelöscht? Führen Sie einen einzelnen Befehl im Terminal aus, um den vorherigen Status des Projekts wiederherzustellen. Katastrophe vermieden!
  2. Hustete Sie schon immer vor Erregung, als Ihre Website irgendwie von Ihrem Desktop verschwand? Es war gestern da, aber heute ist es weg! Ein kostenloser Dienst namens GitHub macht dies zu einem Problem.
  3. Wer zum Teufel würde dieses Stück Code schreiben, das ich jetzt stundenlang neu schreiben muss? Kein Grund, sich zu fragen, wer Schuld ist. Git wird es dir sagen!
  4. Code mit Abbruch, obwohl Sie wissen, dass bei jedem Commit "Momentaufnahmen" Ihrer Anwendung gespeichert werden, nur für den Fall, dass Sie irgendwann in der Zukunft zu diesem Status zurückkehren müssen.
  5. Wenn Sie aus keinem anderen Grund akzeptieren, dass Entwickler, die wahrscheinlich viel mehr Erfahrung haben als Sie, dies als bewährte Methode angesehen haben. Es ist hilfreich, diejenigen zu imitieren, die wir bewundern.

Git?

Git ist das bekannteste Versionskontrollsystem.

Wie berücksichtigt Git diese ganze Version der Versionskontrolle? Nun, die Super-Nerdy-Definition ist, dass Git ein verteiltes Versionskontrollsystem ist, das von Linus Torvalds entwickelt wurde, wobei jedes Arbeitsverzeichnis ein eigenes Repository mit dem vollständigen Verlauf ist, der jederzeit verfügbar ist. Darüber hinaus bietet Git die Möglichkeit, Code gemeinsam zu nutzen und mehrere Zweige (oder Zeitpläne) für Ihre Projekte zu erstellen, wodurch dieser besonders für agile Entwicklungsteams geeignet ist.

Eine verständlichere Definition könnte sein: Git ist ein Befehlszeilentool, das Sie - und alle anderen Entwickler Ihres Teams - verwenden, um häufige Momentaufnahmen Ihrer Projekte zu speichern. Zu jedem Zeitpunkt bietet es die Flexibilität, Änderungen an vorherigen Zuständen mit nur einem einzigen Befehl rückgängig zu machen.

Scott Chacons Buch "Pro Git" ist in seiner Gesamtheit verfügbar auf der Git-Website.


Git installieren

Natürlich ist der erste Schritt zur Wiederherstellung von "Wrackless" "Cowboy Coding" das Herunterladen von Git von git-scm.com. Verwenden Sie je nach Betriebssystem Ihrer Wahl eine der folgenden URLs.

  • Mac: http://git-scm.com/download/mac
  • Windows: http://git-scm.com/download/win

Als Nächstes müssen wir die Installation nur durch eine Berührung konfigurieren, indem wir einen Benutzernamen und eine E-Mail-Adresse zuordnen. Öffnen Sie Ihre nächste Konsole (Terminal auf dem Mac) und führen Sie Folgendes aus:

$ git config --global user.name "Ihr Name" $ ​​git config --global user.email [email protected]

Mach dir keine Sorgen; Dies muss nur einmal eingegeben werden, nachdem Sie Git zum ersten Mal installiert haben. Nun wird Git für jede Aktion, die Sie ausführen, diese Einstellungen verwenden.

Es gibt weitere Konfigurationsoptionen, z. B. die Angabe, welcher Code-Editor verwendet werden soll, wenn Sie von Git aufgefordert werden, eine Festschreibungsnachricht einzugeben, dies aber vorerst ignorieren.

Herzlichen Glückwunsch, Git wurde erfolgreich installiert!


Der grundlegende Zyklus

Wie bei jeder neuen Technologie ist nur ein kleiner Lernaufwand erforderlich.

Einer der schwierigsten Aspekte beim Erlernen von Git ist das Entschlüsseln, worauf sich die verschiedenen Fachbegriffe beziehen. Commits? Inszenierung Geäst? Protokolle Huh?

Wie bei jeder neuen Technologie ist nur ein kleiner Lernaufwand erforderlich. Glücklicherweise kann Git so komplex sein, wie es insbesondere bei einem Webdesigner der Fall ist, dass eine Handvoll Befehle einen langen Weg gehen wird. Betrachten Sie zum Vergleich das englische Wörterbuch und dann die Anzahl der Wörter, die wir in alltäglichen Gesprächen realistisch verwenden. Dasselbe gilt für Git - auf einer viel niedrigeren Ebene. Fühle dich nicht überfordert. Nimm einen Befehl zu einem Zeitpunkt.

Um diese verwirrende Terminologie zu beseitigen, sollten Sie zuerst an etwas denken, das in der realen Welt greifbar ist: einen Lieferwagen.

Stellen Sie sich vor, Sie haben eine neue statische Website gestartet. Sie haben Ordner für JavaScript- und CSS-Dateien sowie eine index.html-Datei mit etwas mehr Text als HTML erstellt. Tut das genau jetzt! Wenn Sie fertig sind, ist es Zeit, das erste Commit zu erstellen.

Kehren Sie zum Terminal zurück und geben Sie Folgendes ein:

git init

Dieser Befehl "Git initialisieren" informiert Git, dass wir die Versionskontrolle für dieses Projekt wünschen. Oder "Zündung starten". Es muss nur einmal ausgeführt werden, zu Beginn des Lebenszyklus eines neuen Projekts.

Als nächstes wollen wir feststellen, was der "Status" ist.

Git-Status

Wenn Sie mitarbeiten, sehen Sie wahrscheinlich etwas in der Richtung von:

# Am Zweigmaster # # Initial Commit # # Nicht getrackte Dateien: # (Verwenden Sie "git add") … "Um in das einzubeziehen, was festgeschrieben werden soll) # # index.html Es wurde nichts zum Festschreiben hinzugefügt, aber nicht protokollierte Dateien vorhanden (verwenden Sie" git add "zum Verfolgen)

Wenn auch etwas verwirrend, werden wir, wenn wir uns einen Moment Zeit nehmen, feststellen, dass wir standardmäßig an einem "Zweig" arbeiten, der "Master" genannt wird. Als nächstes haben wir eine untracked Datei: index.html. Daraus können wir entschlüsseln, dass Git nicht magisch ist. Es muss gesagt werden, welche Dateien man sozusagen im Auge behalten soll.

Neugierig, warum die JavaScript- und CSS-Verzeichnisse nicht in der Liste der nicht protokollierten Dateien enthalten sind? Git verfolgt Dateien, keine Ordner. Eine häufige Methode, leere Verzeichnisse in ein Commit aufzunehmen, besteht jedoch darin, jedem Unterverzeichnis eine .gitignore-Datei hinzuzufügen. Dazu später mehr!

Dateien verfolgen

Um Dateien nachverfolgen zu können, müssen wir sie zuerst zum Bereitstellungsbereich hinzufügen - oder sie auf den LKW legen.

git add index.html

Wenn wir jetzt den Status erneut überprüfen, werden wir Folgendes sehen:

Auf Zweigmaster # # Initial Commit # # Änderungen, die festgeschrieben werden sollen: # (Verwenden Sie "git rm --cached") … "Um die Bühne frei zu setzen # # neue Datei: index.html

Ausgezeichnet; Git überprüft diese Datei auf Änderungen. In diesem Fall haben wir nur eine einzige Datei hinzugefügt. Wenn wir es vorziehen, alle Dateien dem Staging-Bereich hinzuzufügen, können wir das Periodensymbol verwenden.

git add .

Denken Sie daran, dass der LKW noch nicht abgefahren ist. Wir haben lediglich ein paar Kisten (oder Dateien) in den Rücken geladen. Um den Schnappschuss auszuführen und eine Kopie des Projekts in seinem aktuell verfolgten Status zu speichern, muss ein Commit ausgeführt werden.

git commit -m 'Erstes Commit'

Oben haben wir ein neues Commit erstellt und die Nachricht "First Commit" angezeigt. Damit ist unser erster Commit abgeschlossen und der Truck ist mit einer Kopie des Projekts auf der Rückseite zur Fabrik gefahren.

Um Ihre Arbeit zu überprüfen, verwenden Sie einen neuen Befehl: "log".

Git Log Commit 02c934fcaf3de7677273b74d8ad3ed5041066986 Autor: Jeffrey Way  Datum: Mi Dez 19 15:07:23 2012 -0500 Erstes Commit

Perfekt, es wurde tatsächlich ein neues Commit erstellt, und es scheint auch, dass das Commit eine eindeutige Referenz-ID hat. Feile das für jetzt weg.

Wenn Sie erneut den Status überprüfen.

Git-Status

Da seit dem letzten Commit keine Änderungen vorgenommen wurden, teilt uns Git so viel mit:

# Am Zweigmaster nichts zu übergeben (Arbeitsverzeichnis bereinigen)

Erfolg! 90% Ihrer Git-Nutzung werden diesem Zyklus folgen.

  • Änderungen vornehmen
  • Fügen Sie dem Bereitstellungsbereich Dateien hinzu
  • Führen Sie ein Commit mit einer Nachricht aus, die die durchgeführte Aktion beschreibt

Spülen und wiederholen!

Fahren wir mit dem nächsten Schritt fort. Als einfaches Beispiel möchten wir vielleicht ein einfaches Reset-Stylesheet in unser Projekt einfügen. Wir werden die grundlegendsten (vielleicht schlecht empfohlenen) Resets schreiben.

/ * css / reset.css * / * Marge: 0; Polsterung: 0; 

Kehren Sie jetzt zu index.html zurück und geben Sie einen Verweis auf diese Datei an:

        

Als Faustregel gilt: Wenn Sie der Person, die neben Ihnen sitzt, die Änderungen beschreiben können, die Sie gerade an einem Projekt vorgenommen haben, ist dies wahrscheinlich ein Commit. Oft begehen. Lass uns das jetzt tun; zurück zum Terminal!

git add. git commit -m 'Reset Stylesheet hinzufügen und einfügen.'

Beim Schreiben von Festschreibungsnachrichten gilt es im Allgemeinen als beste Methode, im Präsens zu schreiben. Also "Datei hinzufügen" statt "Datei hinzugefügt".

Schneller Vorlauf bis morgen, und jetzt sagt Ihnen Ihr Chef, dass er Ihre einfache Reset-Datei nicht verwenden möchte. Stattdessen verwenden sie lieber das beliebte Stylesheet Normalize von Nicolas Gallagher.

Kein Problem; Mit Git ist dies eine einfache Lösung. Lassen Sie uns das vorherige Commit rückgängig machen und die erforderlichen Änderungen vornehmen.

git kehrt HEAD zurück

Bei Git lautet die Regel: "Geschichte nie neu schreiben".

Mit diesem Befehl werden alle Änderungen rückgängig gemacht, die Sie beim letzten Commit vorgenommen haben. Im Wesentlichen ist es ein Commit, das genau das Gegenteil von dem tut, was das vorherige getan hat. Warum umkehren, anstatt das Commit vollständig rückgängig zu machen? Auch hier, weil wir Best Practices befolgen. Bei Git lautet die Regel: "Geschichte nie neu schreiben". Machen Sie die Änderungen rückgängig, löschen Sie sie jedoch nicht und machen Sie sie rückgängig.

Wenn Sie die Eingabetaste drücken, gelangen Sie zu einem neuen Bildschirm mit dem Text, "Zurücksetzen" Hinzufügen und Zurücksetzen des Stylesheets. " Zu diesem Zeitpunkt befinden Sie sich im Vi-Modus (Sie können Git jedoch so konfigurieren, dass er den gewünschten Code-Editor verwendet.) Gehen Sie jetzt zu den Standardeinstellungen, speichern und beenden Sie das Programm. Führen Sie das durch, indem Sie Folgendes eingeben: wq (Write and Quit).

Und mit diesem einzigen Befehl wurden die Änderungen rückgängig gemacht. Gehen Sie weiter und überprüfen Sie, ob es sicher ist. Die style.css-Datei wurde entfernt und es gibt keinen Verweis mehr auf das Stylesheet in index.html. Das ist die Kraft von Git! Da wir häufig einen Entwicklungsstil des Commitierens angenommen haben, in Situationen, in denen die Bearbeitung rückgängig gemacht werden muss, ist nur ein einziger Befehl erforderlich. Nie mehr drängen Befehl-Z für die ewigkeit!

Nach der Anfrage des Chefs aktualisieren wir das Projekt, um Normalize.css zu verwenden, das wir heruntergeladen und in css / normalize.css platziert haben.

Verweisen Sie in index.html darauf:

Und zum Schluss übernehmen wir die Änderungen.

git add. git commit -m "Normalisieren in Projekt"

Obwohl dies sicherlich ein einfaches Beispiel ist, können Sie sich vorstellen, wie nützlich diese Technik für größere Änderungen sein kann, die sich auf mehrere Dateien in Ihrer Anwendung erstrecken. Indem wir alle damit verbundenen Änderungen in einem einzigen Commit zusammenfassen, erreichen wir maximale Flexibilität und Sicherheit.


Raum zum Experimentieren

Warst du schon einmal an einem Punkt in einem Projekt, wenn du mit einer Idee experimentieren willst, die es vielleicht in die fertige Anwendung schafft? Es ist zwar wahr, dass Sie das Festschreiben jederzeit rückgängig machen können, wenn die Dinge nicht nach Plan verlaufen, aber aus verschiedenen Gründen ist es eine klügere Idee, die Verzweigung stattdessen zu nutzen.

Der beste Weg, um das Konzept der Git-Zweige zu veranschaulichen, ist der Verweis auf Back to the Future 2.

Wenn Sie also ein nerdiger Entwickler sind und die Trilogie "Zurück in die Zukunft" noch nicht gesehen haben, hören Sie auf, was Sie tun, und schauen Sie sich diese an!

Wenn Sie fortfahren, erinnern Sie sich an den Teil in Zurück in die Zukunft 2, nachdem Marty und Doc 1985 aus der Zukunft zurückgekehrt sind, aber finden Sie heraus, dass alles anders ist? Bei einem Treffen in Docs, dem nun zerstörten Labor, zeichnet Doc ein Diagramm, in dem er beschreibt, wie "die Zeitleiste irgendwann in diese Tangente geraten ist und ein alternatives 1985 geschaffen wird". Das ist wie beim Verzweigen!

Betrachten Sie unser aktuelles Demo-Projekt. Im Moment gibt es eine Zeitleiste: eine gerade Linie. Sobald wir einen Zweig erstellen, um an unserer Idee zu arbeiten, brechen wir diese Zeitlinie ab und erstellen einen neuen. An diesem Punkt existieren beide Zeitpläne und können ihre jeweiligen jeweiligen Commits enthalten, ohne sich gegenseitig zu stören.

Wie ist das sinnvoll? Stellen Sie sich einen agilen Entwicklungszyklus vor, in dem Sie oder Ihr Team mehrmals wöchentlich Updates bereitstellen. Wenn Sie sich an die "Single Timeline" -Anwendung halten, ist die Bereitstellung beispielsweise eines einfachen Tippfehlers erst möglich, wenn Sie Ihre Idee fertiggestellt haben. Mit der Verzweigung haben wir jedoch die Flexibilität, so lange wir unsere Idee brauchen, während wir den Hauptzweig (den Standard- und den Primärzweig) für die Bereitstellung des Tippfehlers freigeben.

Um einen neuen Zweig anzulegen, führen Sie Folgendes aus:

$ git Zweigidee $ git Checkout-Idee

Alternativ kombinieren Sie diese beiden Befehle zu einem Befehl.

git checkout -b idee

Dies bedeutet: Erstellen Sie einen neuen Zweig mit dem Namen "Idee" (ersetzen Sie dies, um das zu beschreiben, woran Sie gerade arbeiten), und wechseln Sie zu ihm.

Ab diesem Zeitpunkt werden alle von Ihnen vorgenommenen Änderungen und Commits nicht innerhalb des Master-Zweigs referenziert. Probieren Sie es aus. Bearbeiten Sie index.html und nehmen Sie eine kleine Änderung vor:

 

Meine Idee

Dann legen Sie Ihre Arbeit fest.

git add index.html git commit -m "Erster Entwurf meiner Idee"

Wir haben jetzt in dieser neuen Zeitleiste unser erstes Engagement eingegangen. Unsere fiktive Idee braucht noch Arbeit, aber wir sind auf dem Weg! Aber jetzt hat ein Kunde gerade einen Tippfehler gemeldet, den wir so schnell wie möglich beheben müssen. Da wir Zweige korrekt verwenden, können wir zum Hauptzweig zurückkehren, den Tippfehler korrigieren und ihn bereitstellen.

git checkout master # fixer Tippfehler git add index.html git commit -m 'Kleiner Tippfehler korrigieren' git push

Sobald unser Ideen-Feature fertig ist, ist es Zeit, es wieder in den Master-Zweig einzubinden.

git checkout master git merge idee

Wenn alles nach Plan verläuft, wird Ihr Feature-Zweig erfolgreich wieder in den Master-Zweig eingefügt, wodurch die alternative zweite 1985-Timeline aufgelöst wird!

Das heißt, Sie werden zweifellos auf Situationen stoßen, in denen Git sich scheinbar mit den Füßen in den Boden setzt und sich weigert, wie gewünscht fortzufahren. In diesen Fällen ist Git kein Grund ohne Grund! Höchstwahrscheinlich bezieht sich das Problem auf einen Konflikt, der zuerst gelöst werden muss, bevor Git fortfahren kann. Stellen Sie sich vor, Sie versuchen, eine Datei wieder mit dem Master-Zweig zusammenzuführen. Das einzige Problem ist, dass die Datei seit der Erstellung des Zweigs sowohl im Feature-Zweig als auch im Master bearbeitet wurde. Wie könnte Git in solchen Situationen möglicherweise wissen, welche Version der Datei beim Zusammenführen der beiden Vorrang haben soll? Das ist nicht der Fall, und das nennen wir Konflikt.

Automatisches Zusammenführen von index.html CONFLICT (Inhalt): Zusammenführungskonflikt in index.html Automatische Zusammenführung fehlgeschlagen; Konflikte beheben und das Ergebnis festschreiben.

Bevor Git fortfahren kann, müssen Sie den Konflikt durch Bearbeiten von index.html lösen.


Dateien ignorieren

Es wird wahrscheinlich ein Punkt kommen, wenn Sie feststellen, dass es am besten ist, bestimmte Dateitypen nicht mit Git zu verfolgen. Beispiele hierfür sind das allgemeine .DS_STORE (mit dem Mac-Benutzer vertraut sein werden), Verzeichnisse und temporär kompilierte Assets.

Mit Git können Sie über eine .gitignore-Datei bestimmte Dateitypen einfach ignorieren. Um dies zu nutzen, erstellen Sie eine neue .gitignore-Datei im Stammverzeichnis (jedoch nicht beschränkt auf) Ihres Projekts. Geben Sie darin eine Liste der zu ignorierenden Dateien oder Dateitypen an. Hier ist ein grundlegendes Beispiel:

.DS_STORE build / * .log * .sql * .exe

Soziale Kodierung

GitHub ermöglicht soziale Kodierung.

Bisher haben Sie gelernt, wie Sie Ihren Code lokal festlegen. Aber wie können diese Modifikationen entweder mit Ihrem Team oder mit dem Rest der Welt geteilt werden? Gib GitHub ein.

Mit GitHub können Sie Ihren Code mit der Welt teilen. Es ist die größte Open Source Community, die es gibt.

Wenn Sie sich bei github.com für ein neues Konto angemeldet haben, müssen Sie einige Schritte zum Generieren eines speziellen Schlüssels ausführen, um Ihren Computer Ihrem GitHub-Konto zuzuordnen. Mach dir keine Sorgen; Wenn Sie die Schritte befolgen, sollten Sie keine Probleme haben.

An diesem Punkt können wir ein neues Repository erstellen und unser kleines Projekt vorantreiben, um es mit der Welt zu teilen. Klicken Sie nach der Anmeldung auf die Schaltfläche "Neues Repository", geben Sie Ihrem Repo einen Namen und klicken Sie auf "Repository erstellen". Als Nächstes werden einige Befehle angezeigt, die in das Terminal eingefügt werden können. Da wir bereits über ein vorhandenes Repo verfügen, benötigen wir die zweite Option:

git remote fügt ursprung https://github.com/USERNAME/project.git hinzu git push -u ursprungmaster

Dies weist Git an, unser neues Remote-Repository hinzuzufügen und es als "Ursprung" zu bezeichnen. Als Nächstes schieben wir den Master-Zweig (nicht die Idee) mit dem Alias ​​"Ursprung" zur Remote-Station.

Das ist es! Kehren Sie zum Browser zurück, aktualisieren Sie die Seite, und Sie werden Ihr neues neues Repository finden, das darauf wartet, mit dem Rest der Welt geteilt zu werden.

Wenn andere Mitglieder Ihres Teams die von Ihnen vorgenommenen Änderungen übernehmen möchten, müssen sie nur Folgendes ausführen:

git ziehen

Dieser Befehl holt die neuesten Updates ein, die auf GitHub übertragen wurden! Neben dem Freigeben von Code bietet GitHub auch die Möglichkeit, beliebte Open-Source-Projekte zu verfolgen und dazu beizutragen, sowie einen Problem-Tracker für Fehler und Funktionsanfragen. Es ist soziales Kodieren vom Feinsten!


Schlussgedanken

Obwohl wir nur die Oberfläche dessen, was Git in der Lage ist, zerkratzt haben, ist die Wahrheit, dass für 80% Ihrer Git-Nutzung die in diesem Artikel genannten Techniken ausreichen. Erstellen Sie einen Funktionszweig, schreiben Sie Code, fügen Sie ihn dem Bereitstellungsbereich hinzu und legen Sie ihn mit einer Nachricht fest. Wenn Sie fertig sind, fügen Sie es wieder in den Master-Zweig ein und implementieren Sie es! Als nächstes abspülen und wiederholen!

Vergiss nicht: StackOverflow ist dein bester Freund. Was auch immer das Problem sein mag, andere waren in genau derselben Situation. Dort zuerst suchen.

TryGit bietet ein interaktives Erlebnis zum Lernen von Git.

Weiter lernen

  • Git Essentials
  • Pro Git
  • Versuchen Sie es mit Git