Git för designers

Du är troligen bekant med verktyg, som Git och Subversion. Men som webbdesigners är det ganska möjligt att du, trots att du kanske säger att du utnyttjar versionskontroll i dina projekt, är sanningen att du oftare inte gör det.
Om du passar den här beskrivningen, oroa dig inte; du är inte ensam. Det är faktiskt den här författarens fullständigt oförsökta åsikt att den stora majoriteten av webbdesignern inte! Problemet är att det finns en allmän tro på att versionskontrollen är strängt för hardcore-kodare, som spenderar sina dagar i mörkret och som sällan kommer upp i luften, förutom när mikrovågsugnen signalerar att hetfickan är redo att ätas.

I själva verket, om du kodar för webben, oavsett om du är på framsidan eller baksidan, är det din plikt att koda på ett ansvarsfullt sätt: använd versionskontroll.


5 tecken på att du är försenad för versionskontroll

  1. Du har inget begrepp om vilken versionskontroll som är, eller varför den kan vara användbar.
  2. Du kodar lokalt och har inget backup-system.
  3. Du säkerhetskopierar dina projekt genom att sporadiskt duplicera rotkatalogen.
  4. Du slog av misstag en fil permanent och måste återkoda från början.
  5. När du gör ett antal ändringar, bryter din ansökan, vid vilken tid du måste hålla ner Kommando + Z för ett smärtsamt antal sekunder, när du ser redaktören omvänd dina ändringar.

Godkänn det: varje utvecklare har identifierat med en av de tecken som tidigare noterats vid en eller annan punkt i sin karriär. Men kom ihåg: det första steget till återhämtning är att erkänna att du har ett problem!


5 Omedelbara fördelar med Version Control

  1. Oavsiktligt raderade den klassen eller PSD? Kör ett enda kommando i terminalen för att återgå till ett tidigare tillstånd i projektet. Katastrof undviks!
  2. Gissat någonsin i skräck, eftersom din webbplats på något sätt försvann från skrivbordet? Det var där igår, men idag är det borta! En gratis tjänst, kallad GitHub, gör detta till ett icke-problem.
  3. Vem heck skulle skriva den här koden som jag nu måste spendera timmar omskrivning? Inget behov av att undra vem som ska skylla Git kommer berätta för dig!
  4. Kod med överge, samtidigt som du vet att, med varje förbindelse, "snapshots" av din ansökan sparas, bara om du behöver rulla tillbaka till detta tillstånd vid någon tidpunkt i framtiden.
  5. Om ingen annan anledning, acceptera att utvecklare som sannolikt är mycket mer erfarna än du har ansett det en bra praxis. Det är användbart att efterlikna dem som vi beundrar.

Git?

Git är det mest populära versionskontrollsystemet tillgängligt.

Så hur påverkar Git i hela versionen kontrollen? Tja, den supernordiska definitionen är att Git är ett distribuerat versionsstyrningssystem, utvecklat av Linus Torvalds, där varje arbetsmapp är sitt eget förråd med hela historien tillgänglig när som helst. Dessutom erbjuder Git förmågan att dela kod och skapa flera grenar (eller tidslinjer) för dina projekt, vilket gör den särskilt lämplig för smidiga utvecklingsgrupper.

En mer begriplig definition kan vara: Git är ett kommandoradsverktyg som du - och andra utvecklare i ditt lag - använder för att spara vanliga snapshots av dina projekt. På en given punkt erbjuder det flexibilitet att rulla tillbaka ändringar till tidigare stater, med bara ett enda kommando.

Scott Chacons bok, "Pro Git", är tillgänglig i sin helhet på Git hemsida.


Installera Git

Visst, det första steget till olycklig "Cowboy Coding" återhämtning är att ladda ner Git från git-scm.com. Använd någon av följande webbadresser, beroende på ditt operativsystem.

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

Därefter måste vi konfigurera installationen bara en knapptryckning genom att associera ett användarnamn och en e-postadress. Öppna din närmaste konsol (Terminal på Mac) och kör:

$ git config -global user.name "Ditt namn" $ git config - global user.email [email protected]

Oroa dig inte; det här behöver bara skrivas en gång efter att du först installerat Git. Nu, för varje åtgärd du tar, använder Git dessa inställningar.

Det finns ytterligare konfigurationsalternativ, t.ex. att ange vilken kodredigerare som ska användas, när Git kräver att du skriver in ett commit-meddelande, men ignorera det för nu.

Grattis, Git har installerats framgångsrikt!


Grundcykeln

Som med någon ny teknik krävs en liten del av lärandet.

En av de svåraste aspekterna att lära Git är att dechiffrera vad det olika jargonget hänvisar till. Begår? Iscensättning? Grenar? Loggar? Huh?

Som med någon ny teknik krävs en liten del av lärandet. Lyckligtvis, så komplicerat som Git kan vara, särskilt som webbdesigner, kommer du att upptäcka att en handfull kommandon kommer att gå långt. För jämförelse, överväga den engelska ordlistan, och sedan antalet ord som vi realistiskt använder i vardagssamtal. Samma sak gäller Git - på en mycket lägre nivå. Så känner du inte överväldigad. Ta det ett kommando åt gången.

För att slå ut denna förvirrande terminologi är det bäst att först tänka på något som är konkret i den verkliga världen: en leveransbil.

Tänk dig att du har börjat en ny statisk webbplats. Du har skapat mappar för JavaScript och CSS-filer, såväl som en index.html-fil med lite HTML-kod. Faktum är, gör så mycket sak just nu! När du är klar är det dags att skapa det första engagemanget.

Återgå till terminalen och skriv:

git init

Detta kommando, "initiera Git", informerar Git att vi önskar versionsstyrning för detta projekt. Eller, "starta tändningen." Det behöver bara utföras en gång, i början av ett nytt projekts livscykel.

Låt oss sedan bestämma vad "status" är.

git status

Om du arbetar tillsammans ser du sannolikt något i linje med:

# På grenmästare # # Initial commit # # Untracked files: # (använd "git add ... "att inkludera i vad som kommer att begås) # # index.html inget tillagd för att begå men ospårade filer finns (använd" git add "för att spåra)

Även om det är lite förvirrande, ser vi att vi som vanligt arbetar med en "filial" som heter "master". Därefter har vi en ospårad fil: index.html. Från det här kan vi dechifiera att Git inte är magisk; det måste finnas att veta vilka filer som ska hålla ett öga på, så att säga.

Nyfiken varför JavaScript och CSS-katalogerna inte ingår i listan över ospårade filer? Git spårar filer, inte mappar. En vanlig teknik att inkludera tomma kataloger i en commit är att lägga till en .gitignore-fil till varje underkatalog. Mer om det senare!

Spårning av filer

För att spåra filer måste vi först lägga till dem i uppställningsområdet - eller sätta dem på trucken.

git lägg till index.html

Om vi ​​nu tittar på statusen igen ser vi:

På grenmästare # # Initial commit # # Ändringar som ska begås: # (använd "git rm - cached ... "för att unstage) # # ny fil: index.html

Excellent; Git tittar på den här filen för ändringar. I det här fallet har vi bara lagt till en enda fil. Om vi ​​i stället föredrar att lägga till alla filer i spelningsområdet, kan vi använda periodsymbolen.

git lägg till .

Tänk på att lastbilen ännu inte har lämnat Vi har bara laddat ett par lådor (eller filer) i ryggen. För att utföra ögonblicksbilden och spara en kopia av projektet i dess nuvarande spårat tillstånd, måste ett åtagande utföras.

git commit -m "Första commit"

Ovan har vi skapat ett nytt engagemang och tillhandahållit ett meddelande om "Första commit". Därmed har vårt första engagemang slutförts, och lastbilen har lämnat på fabriken med en kopia av projektet på baksidan.

För att verifiera ditt arbete, använd ett nytt kommando: "logga".

git logga commit 02c934fcaf3de7677273b74d8ad3ed5041066986 Författare: Jeffrey Way  Datum: ons dec 19 15:07:23 2012 -0500 Första commit

Perfekt, ett nytt engagemang har faktiskt skapats, och det verkar också som fördraget har ett unikt referens-ID. Fil som är borta för nu.

Om du igen kontrollerar statusen.

git status

Eftersom inga ändringar har gjorts sedan det senaste engagemanget säger Git oss så mycket:

# På grenmästaren inget att begå (arbetskatalog ren)

Framgång! 90% av din Git-användning kommer att följa denna cykel.

  • Göra ändringar
  • Lägg till filer i staging-området
  • Utför ett fördrag med ett meddelande som beskriver åtgärden som ägde rum

Skölj och upprepa!

Låt oss gå vidare till nästa steg. Som ett enkelt exempel kanske vi vill inkludera ett enkelt återställningsblankett i vårt projekt. Vi skriver de mest grundläggande (kanske dåliga råd) av återställningar.

/ * css / reset.css * / * margin: 0; vaddering: 0; 

Återgå nu till index.html och inkludera en hänvisning till den här filen:

        

Som en grundläggande tumregel, om du kan beskriva för personen som sitter bredvid dig, vilken förändring du just gjort för ett projekt, förtjänar det förmodligen ett engagemang. Kommit ofta. Låt oss göra det nu tillbaka till terminalen!

git lägg till. git commit -m 'Lägg till och inkludera återställ stilark.'

När man skriver meddelanden, anses det allmänt vara bästa praxis att skriva i nuvarande tid. Så, "lägg till fil" istället för "tillagd fil."

Snabbspolning fram till imorgon, och nu säger din chef dig att de inte vill använda din enkla återställningsfil. Istället föredrar de att använda det vanliga Normalisera stilarket, av Nicolas Gallagher.

Inga problem; med Git, det här är en enkel lösning. Låt oss återgå till föregående åtagande och göra nödvändiga ändringar.

git återställ HEAD

Med Git är regeln "aldrig skriva om historiken."

Det här kommandot kommer att vända alla de ändringar som du gjorde i det senaste engagemanget. I huvudsak är det ett engagemang som gör det exakta motsatsen till vad den tidigare gjorde. Varför återställ, istället för att ångra åtagandet helt? Återigen, för att vi följer bästa praxis. Med Git är regeln "aldrig skriva om historiken." Återställ ändringarna, men radera aldrig och ångra dem.

När du slår in kommer du till en ny skärm med texten, "Återgå" Lägg till och inkludera återställ stilark. " Vid denna tidpunkt är du i Vi-läget (men du kan konfigurera Git för att använda vilken kodredigerare du vill.) För nu, gå till standardinställningarna, spara och avsluta. Uppnå detta genom att skriva: wq (Write and Quit).

Och med det enda kommandot har ändringarna återställts. Fortsätt och kontrollera för att vara säker. Style.css-filen har tagits bort, och det finns inte längre någon referens till stilarket inom index.html. Detta är kraften i Git! Eftersom vi antog en utvecklingsstil att begå ofta, när de placeras i situationer, där ändringar behöver vändas, tar det bara ett enda kommando. Inget mer tryckande Kommando-Z för enternity!

Efter chefens begäran, låt oss uppdatera projektet för att använda Normalize.css, som vi har laddat ner och placerat inom css / normalize.css.

Inom index.html, hänvisa till det:

Och slutligen förbinder vi oss förändringarna.

git lägg till. git commit -m "Inkludera Normalize in project"

Även om det här var ett enkelt exempel, kan du föreställa dig hur användbar den här tekniken är för större ändringar, som spänner över flera filer inom din ansökan. Genom att gruppera alla relaterade ändringar i ett enda engagemang uppnår vi maximal flexibilitet och säkerhet.


Rum till experiment

Har du någonsin varit på en punkt i ett projekt när du vill experimentera med en idé som kanske eller inte gör det till den färdiga applikationen? Medan det är sant att du alltid kan återföra begåendet om saker inte går enligt planen är det en smartare idé, av olika skäl, att istället utnyttja förgrening.

Det bästa sättet att illustrera begreppet Git-grenar är att referera till Back to the Future 2.

På den notisen, om du är en nördig utvecklare och inte har tittat på trilogin Back to the Future, sluta vad du gör och titta på dem!

Fortsätt, kom ihåg delen i Back to the Future 2, efter Marty och Doc återvänder till 1985 från framtiden, men tycker att allt är annorlunda? Vid mötet i Docs, nu förstörda lab, ritar Doc ett diagram som beskriver hur "tidslinjen skevdes in i denna tangent, skapar en alternativ 1985." Det här är precis som förgrening!

Tänk på vårt nuvarande demoprojekt. just nu finns det en tidslinje: en rak linje. Så snart vi skapar en gren för att arbeta med vår idé, bryter vi bort från denna tidslinje och skapar en annan. Vid denna tidpunkt finns båda tidslinjerna och kan innehålla sina respektive förbindelser utan att störa varandra.

Hur är det här användbart? Tänk på en rörlig utvecklingscykel - en där du eller ditt team distribuerar uppdateringar flera gånger varje vecka. Om du håller fast vid "enkel tidslinje" -metoden, kan du till exempel använda en enkel typfiksfixering inte vara möjlig förrän du har arbetat med din idé också. Med förgrening har vi emellertid flexibiliteten att ta så lång tid som vi behöver på vår idé, samtidigt som vi befriar huvudgrenen (standard och primära) för att använda typsnittet.

För att skapa en ny fil, kör:

$ git branch idea $ git checkout idé

Alternativt kan du kombinera dessa två kommandon till en.

git checkout -b idé

Det här betyder att: skapa en ny fil, kallad "idé" (ersätt det här för att vara mer beskrivande av vad du jobbar med, förstås) och byta till det.

Från och med denna tidpunkt kommer eventuella ändringar och förpliktelser som du gör inte att refereras inom huvudgrenen. Fortsätt, prova det. Redigera index.html och gör en liten ändring:

 

Min idé

Därefter begå ditt arbete.

git lägg till index.html git commit -m "Första utkastet till min idé"

Vi har nu gjort vårt första engagemang i den här nya tidslinjen. Vår fiktiva idé behöver fortfarande arbete, men vi är på väg! Men nu rapporterade en kund bara ett typsnitt som vi behöver fixa så snart som möjligt. Eftersom vi använder filialer korrekt, kan vi återvända till huvudgrenen, fixa skrivetypen och distribuera den.

git checkout master # fix typgit add index.html git commit -m 'Fix små typsnitt' git push

När vår idéfunktion är klar är det dags att fusionera det tillbaka till huvudgrenen.

git checkout master git fusion idé

Om allt går enligt planen kommer din funktionsgren att slås samman igen i huvudgrenen, och lösa alternativa andra 1985-tidslinjen!

Med det sagt kommer du utan tvekan att stöta på situationer när Git till synes planterar fötterna i marken och vägrar att fortsätta som fråga. I dessa fall är Git inte en jerk utan anledning! Mest sannolikt hänför sig problemet till en viss konflikt som först måste lösas, innan Git kan fortsätta. Tänk dig att försöka slå ihop en fil tillbaka till huvudgrenen Det enda problemet är att filen, sedan filialen skapades, har redigerats både i funktionsgrenen och i mästaren. I situationer som detta, hur kan Git eventuellt veta vilken version av filen som ska ta precendence, när de sammanfogar de två? Det gör det inte, och det här kallar vi en konflikt.

Automatisk sammanslagning index.html CONFLICT (innehåll): Sammanfoga konflikt i index.html Automatisk sammanslagning misslyckades; fixa konflikter och sedan begå resultatet.

Innan Git kan fortsätta måste du lösa konflikten genom att redigera index.html.


Ignorera filer

Det kommer sannolikt att komma en punkt när du bestämmer att det är bäst att inte spåra vissa filtyper med Git. Exempel kan vara den gemensamma .DS_STORE (vilken Mac-användare kommer att känna till), bygga kataloger och tillfälligt sammanställda tillgångar.

Enkelt nog, tillåter Git, via en .gitignore-fil, att vi ignorerar vissa filtyper. För att utnyttja detta skapar du en ny .gitignore-fil i rotten (men inte begränsad till) för ditt projekt. Inom den, ge en lista med filer eller filtyper att ignorera. Här är ett grundläggande exempel:

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

Social kodning

GitHub gör social kodning möjlig.

Hittills har du lärt dig att begå din kod lokalt. Men hur kan dessa modifikationer delas med antingen ditt team eller resten av världen? Ange GitHub.

GitHub låter dig dela din kod med världen. Det är det största open source-samhället som finns.

När du har registrerat dig för ett nytt konto på github.com måste du följa några steg för att skapa en specialnyckel för att associera din dator med ditt GitHub-konto. Oroa dig inte; Om du följer stegen, borde du inte ha några problem.

Vid denna tidpunkt kan vi skapa ett nytt förråd och trycka vårt lilla projekt för att dela det med världen. När du är inloggad, klicka på "New Repository" knappen, ge ditt repo ett namn och klicka på "Skapa Repository." Därefter kommer du att presenteras med några kommandon som kan klistras in i terminalen. Eftersom vi redan har en befintlig repo behöver vi det andra alternativet:

git remote add ursprung https://github.com/USERNAME/project.git git push -u ursprungsmästare

Detta instruerar Git att lägga till vårt nya fjärrförvar och alias det som "ursprung". Därefter trycker vi huvudgrenen (inte idén) till fjärrkontrollen med aliaset "ursprung".

Det är allt! Återgå till webbläsaren, uppdatera sidan och du hittar ditt färska nya förråd och väntar på att delas med resten av världen..

När andra medlemmar i ditt lag önskar ta in de ändringar som du har gjort, behöver de bara springa:

git pull

Detta kommando kommer att dra in de senaste uppdateringarna som har skjutits till GitHub! Förutom att dela kod, erbjuder GitHub också möjligheten att spåra och bidra till populära open source-projekt, samt en frågespårare för fel och funktionsförfrågningar. Det är socialt kodande som bäst!


Slutsatser

Även om vi bara har repat ytan på vad Git kan klara av, är sanningen att, för 80% av din Git-användning, kommer de tekniker som avses i denna artikel att räcka. Skapa en funktionsgren, skriv en kod, lägg till den i uppställningsområdet och bind den med ett meddelande. När du är redo, slå den tillbaka i huvudgrenen och sätt in! Skölj därefter och upprepa!

Glöm inte: StackOverflow är din bästa vän när stumped. Oavsett vad problemet kan vara, har andra varit i exakt samma situation. Sök där först.

TryGit erbjuder en interaktiv upplevelse för att lära sig Git.

Ytterligare lärande

  • Git Essentials
  • Pro Git
  • Prova Git