Nis.06

Hızlandırılmış Git Versiyon Kontrol Sistemi ve Github Dersleri: Kişisel GitHub Reposu Açmak ve Temel Git Komutları [Part 2]


İş dünyasında çalıştığınızda muhtemelen tek başınıza çalışmayacak ve ortak projelerde görev alacaksınız. Uzak sunucularda yer alan projeleri kendi bilgisayarınıza klonlayıp ayrı ayrı branch’larda çalışmanız gerekecek. Ben de basit bir repo projesi üzerinden (Vue) ile sizlere versiyon kontrol sistemi ile biraz pratik yaptırmak istedim.

Git Kurulumu

Bir projede versiyon kontrolü sağlayabilmek için ilk olarak Git kurulumu yapmak gerekiyor. Git’i indirip kurmak için https://git-scm.com/downloads adresine girin ve kurulum dosyasını indirip bilgisayarınıza yükleyin.

Windows işletim sistemi kullandığınızı varsayarak ilerliyoruz yine. Kurulum dosyasını başlatın ve Next ile ilerleyerek kurulumu sürekli varsayılan ayarları değiştirmeden ilerletin ve kurulumu tamamlayın.

Kurulumun başarılı olup olmadığını test etmek için Terminal’den aşağıdaki komutu girin ve Git versiyonunu kontrol edin.

git --version

Artık lokal sistemde versiyon kontrol sistemi kullanabiliriz. Ancak bunun için Git komutlarını bilmemiz gerekiyor…

Kurulumdan sonra Mouse imlecinin sağ menüsüne Git Bash eklenecektir. İstediğiniz herhangi bir dizinde Mouse ile sağ tıklayıp direkt Terminali açabilir ve daha rahat bir arayüz ile kullanabilirsiniz.

Temel Git Komutları ve Kullanımları

Örnek olması amacıyla bir proje oluşturalım ve o proje üzerinde değişiklikleri takip edelim.

Çalışmak istediğiniz dizinde Terminal’den  vue create proje komutu ile yeni bir Vue şablonu oluşturun (Veya doğrudan statik bir web projesi bile açabilirsiniz, ama konumuz Vue olduğu için bir Vue projesi ile incelemek daha doğru olur).

.DS_Store 
node_modules 
/dist 
# local env files 
.env.local 
.env.*.local 
# Log files 
npm-debug.log* 
yarn-debug.log* 
yarn-error.log* 
# Editor directories and files 
.idea 
.vscode 
*.suo 
*.ntvs* 
*.njsproj 
*.sln 
*.sw?

Vue projesini CLI ile oluşturduğunuzda otomatik olarak gizli olarak .git klasörü .gitignore dosyası da oluşturulur  Bu dosya, Git’in takip etmemesi, yani görmezden gelmesi gereken dosya ve dizinleri tanımlayacağımız bir dosyadır.

Yapılan tanımlamalara göre dist ve node_modules klasörleri, log dosyaları, yapılandırma dosyaları ve kulanmış olduğumuz editör (VS Code)’a ait ayar dosyalarını görmezden gelmektedir. Çünkü bunların proje ile pek alakası yoktur. dist klasörü zaten build edilince çıkar ve sürekli güncel halde olması gerekir, node_modules ise npm init ile tekrar package.json’daki tanımlamalara göre yüklenecek.

.git klasöründe de master ve her commit ile birlikte versiyonlanmış dosyalarımız depolanacaktır.

Eğer statik olarak başka projeler oluşturuyorsanız, yani Git reposundan npm ile dosya çekmeden proje oluşturuyorsanız doğal olarak o klasör içindeki dosyalar için bir Git başlamamış olacak. Terminal’den o klasör içine girdiğinizde git init komutunu girip onaylayarak versiyonlama işlemine başlayabilirsiniz.

Komutu girdiğimizde repomuz .git klasöründe oluşturuldu ve otomatik olarak master branch’ına geçti. Master, projenin ana kök branch’tır.

CLI üzerinde oluşturduğumuz Vue şablonu ile Git komutlarını öğrenmeye devam edelim. Projemiz Masaüstünde test adlı bir klasör içinde yer almakta. VS Code ile açıp bazı değişiklikler yaparak versiyonlayacağız.

git config

Git işlemlerinizde genelde kullanıcı tanımlamanızı sağlar. Kullanıcı için isim ve e-posta bilgileri girilir.

Kullanımı (Kullanıcı adı): git config –global user.name “UğurGELİŞKEN”

Kullanımı (Kullanıcı e-posta): git config –global user.email “ugurgelisken@gmail.com”  

Tanımladığınız değerleri görmek için git config user.name veya git config user.mail ile çağırabilirsiniz. Diğer tüm tanımlamalarla birlikte görmek isterseniz git config –list komutunu kullanabilirsiniz.

git init

Yeni bir repo başlatmak için kullanılır. Projemize ilk repomuzu oluştururken kullanmıştık.

Kullanımı: git init repoIsmi

git add, git status

Projede yer alan dosyalarda bir değişiklik yaptıysanız ve bu dosyaları da commit’lemek isterseniz, yani versiyonlayıp yedeklemek isterseniz bu komut ile hafızaya almamız gerekir. Sonrasında da commit komutu uygulanmalı.

Dosyaları hafızaya almak için her bir dosyanın path’i tanıtılmalı. Eğer tüm dosyalar eklenecekse –all  parametresi ile tüm değişiklik yapılan dosyalar eklenir.

Daha önce bir proje oluşturmuştuk. Bu Vue projesinde App.vue dosyasında ufak bir değişiklik yapıp kaydedelim.

<HelloWorld msg=”Merhaba VUE“/>

HelloWorld Component’ine verilen msg prop değerini değiştirdik. Aynı Component’te şu satırı da silin.

<img alt=”Vue logo” src=”./assets/logo.png”>

Sonra gidip src/assets klasöründeki logo.png’yi de silin.

Proje klasöründe Terminal’de aşağıdaki komutu uygulayın.

Kullanımı: git status  

Status komutu, o anki durum hakkında bilgi verir. Şu an master branch’ta olduğumuzu, src/App.vue dosyasının değiştirildiğini, src/assets/logo.png dosyasının da silindiğini söylüyor. Bu tür dosyalar kırmızı renkle gösterilir. Yaptığımız değişiklikleri versiyonlamak için ikisini de hafızaya almamız gerekiyor.

Kullanımı: git add –all

veya  

Kullanımı: git add src/App.vue src/assets/logo.png

Dosyaları eklerken pratik olarak dosya path’ine Mouse ile çift tıklayın ve seçili hale gelsin, sonra da Mouse’un tekerleğine (orta tuşuna) tıklayın, böylece satırın peşine ekler. Birden fazla dosya ekleyeceğiniz zaman da Space ile dosya path’leri arasında boşluk bırakın. Sonrasında Enter ile onaylayın.

Ekledikten sonra tekrar git status komutu uygulayın. Bu sefer eğer doğru yaptıysanız dosya isimleri yeşil renkle gösterilecek. Artık bir sonraki işlemimiz bunları commit ile işlemek

git commit

Bu komut, dosyaları sürüm geçmişinde kalıcı olarak kaydeder. –m (tek tırnaklı) ve sonrasında “” işaretleri arasında o commit için bir açıklama yazısı girilir. Pratikte bu açıklama yazısı kısa olmalıdır. Hatta JİRA kullanan sistemlerde (iş – görev takip sistemi) her iş için bir kod verilir ve commit yapılırken bu kod numarası girilir. Mesela işin kodu VUE-01 olsun.

Kullanımı: git commit -m “VUE-01”

Dosyalarımız artık versiyonlandı… Tekrar git status komutu uyguladığımızda, biz proje dosyalarında yeni bir değişiklik yapana kadar herhangi bir değişiklik olmadığını söyleyecektir.

git diff

Değişiklik yaptığınız, ama henüz commit etmediğiniz dosyalardaki farklılıkları gösterir.

Kullanımı: git diff

Tekrar Vue projemizde değişiklik yapalım. App.vue’de msg prop değerini yine değişelim. main.js’te de kod satırlarının sonlarına ; işaretleri koyalım.

Kırmızı olan satırlar eski değerleri, yeşil olan satırlar da yeni değerleri gösterir. Terminal penceresi küçük olduğunda tüm değişiklikleri göremeyebilirsiniz. Bu durumda ya pencereyi büyütün, ya da aşağı ok tuşu ile satırları aşağıya doğru açın.

Bu komut ile iki branch arası farklılığı da görebilirsiniz. Branch komutu gelince branch’lar arası karşılaştırma yapmayı göreceksiniz.

git reset, git log

Kullanımı biraz riskli, ama gerekli de olan bir komuttur.

İlk olarak; bir dosyanın takibini durdurmak için kullanılabilir. Mesela bir dosyada değişiklik yaptınız ama onu görmezden gelmek istiyorsunuz, yani git status komutu verdiğinizde sürekli olarak kırmızı göstermesin. Aşağıdaki komutu verdiğinizde o dosyadaki değişiklik görmezden gelinecek.

Kullanımı: git reset dosyaIsmi

İkinci olarak; commit’i geri alabilir. Her commit’in bir id değeri vardır. Bu id değerleri git log komutu ile görülür.

Kullanımı: git reset commitId

Daha önce commit ile App.vue dosyasında yaptık. Bunu VUE-01 ile commit etmiştik. Sonrasında yine App.vue ve main.js dosyalarında değişiklik yaptık, logo.png dosyasını silmiştik.

git log komutunu uygulayalım.

Sonuç olarak 3 adet commit çıktı. Bunlardan biri ilk repo tanımlarken kullandığımız git init ile verilen commit, diğeri de dosya değişikliği yaptığımız ve VUE-01 ve VUE-02 ismi ile commit ettiğimiz değişiklikler.

VUE-02’de yaptığımız değişikliğin hatalı olduğunu veya bu işlemin geri çekilmesini gerektiğini düşünelim.

git log ile listelediğimiz commit’lerin yanlarında alfanumerik olarak bir id görünüyor, bu id’yi kullanarak belirtilen commit’e geri döneceğiz. Şu an VUE-01’e dönmek istiyoruz, bu sebeple aşağıdaki id’yi kullanacağız.

ecdb5b777b48a4e06b0c82e8bea77a19ee81eae3

Üçüncü olarak, bütün komut geçmişini atar ve belirtilen commit’e geri döner.

Kullanımı: git reset -hard commitId

git show

Bir commit’te yapılan değişiklikleri gösterir.

Kullanımı: git show commitId

git branch

Repo üzerinde yeni bir dal (branch) açmaya yarar. Branch konusuna daha önce detaylıca değinmiştik. Şu an repomuz master branch’ında her commit ile ilerlemektedir.

Birinci olarak repoda hangi branch’lar var ve hangi brach üzerindeyiz, onları görelim…

Kullanımı: git branch

Projemizde sadece master branch’ı görünüyor. Aktif olan branch, yeşil renk ile gösterilir.

Yeni bir branch açalım…

Kullanımı: git branch branchIsmi

Örneğimizde VUE-01-fix adında bir branch açtık, sonrasında tekrar branch’ları listeledik. Şu an branch açıldı ama hala master branch’ındayız.

Bir branch’ı silmek için de aşağıdaki komut kullanılır. Yalnız, o an üzerinde olduğunuz branch’ı silemezsiniz; eğer öyle bir fikriniz varsa öncelikle başka bir branch’a geçmeniz gerekir.

Kullanımı: git branch -d branchIsmi

Buradaki -d parametresi, Delete’ten gelmektedir.

git checkout

Açtığımız yeni branch’a geçmek için, git checkout komutu kullanılır.

Kullanımı: git checkout branchIsmi

Yukarıda, ilk olarak master branch’ında olduğumuz görülüyor. Sonrasında branch değiştirdik ve tekrar git status ile hangi branch’ta olduğumuzu kontrol ettik. Tekrar branch’ları listeledik ve VUE-01-fix branch’ında olduğumuzdan iyice emin olduk.

VUE-01-fix branch’ındayken Appi.vue dosyamızda biraz değişiklik yapalım ve kaydedelim. Sonrasında git add –all ile dosyayı hafızaya alıp git commit ile işleyelim.

<HelloWorld msg=”Şu an VUE-01-fix branch’ındayım.”/>

Artık yeni branch’ımızda yeni bir commit yapmış bulunuyoruz.

Tekrar master branch’a dönelim…

git checkout master

VS Code’a dönüp App.vue’ye bakın. Tekrar eski haline gelmiş olacak. Eski derken durum şu; az önceki değişiklik halen VUE-01-fix branch’ında duruyor. Biz şu an branch’ların dallanıp ayrıldığı noktaya geri dönmüş olduk.

<HelloWorld msg=”Vue Öğreniyorum”/>

Görüldüğü üzere tekrar eski “Vue Öğreniyorum” yazısının olduğu hale geldi, diğer bir tabir ile bir önceki dosya sürümüne geldi.

git merge

Bir branch’ı, o an aktif olduğu branch ile birleştirir. Bunun anlamı; iki farklı dalda yapılan değişiklikleri birleştirerek tek bir dalda toplamasıdır. Ancak burada kritik bir kural vardır; her iki branch’ta eğer aynı dosyalar üzerinde çalışılıyorsa, bu sefer conflit dediğimiz (çakışma) durumları olacaktır ve çözümü oldukça sıkıcı ve stresli bir durum meydana gelecektir. Bu nedenle farklı branch’larda çalışanlar aynı dosyalar üzerinde çalışmamaya özen göstermelidir.

Kullanımı: git merge branchIsmi

Daah önce VUE-01-fix branch’ında bir metin değişikliği yapmıştık. Bu yapılan değişikliği onaylayalım ve master branch ile birleştirelim.

Evet, Terminal’de bir hata ile karşılaştık. Merge işlemi yapıldı ama az önce bahsettiğimiz conflit durumu oldu. Hatırlarsanız hep App.vue’de aynı satırı değiştirdik. Aynı satır master ve VUE-01-fix branch’larında farklı farklı görünüyor. Peki, bunlardan hangisi esas alınacak?

Git, bu durumda kararı bize bırakıyor. İki dosyayı da birleştiriyor ama conflit olan yerleri bize bırakıyor. Biz de elle kendimiz düzeltiyoruz.

App.vue dosyasına bakalım…

<template>
  <div id="app">
<<<<<<< HEAD
    <HelloWorld msg="Vue Öğreniyorum"/>
=======
    <HelloWorld msg="Şu an  VUE-01-fix branch'ındayım."/>
>>>>>>> VUE-01-fix
  </div>
</template>

Git, bizim dosyalarımıza biraz da kendisi ekleme yapmış <<<<< HEAD ile gösterilen alan master branch’ı, diğeri de zaten isminden belli olacağı gibi VUE-01-fix branch’ını gösteriyor. Biz, burada hangisi kalsın istiyorsak ona göre dosyamızı temizliyoruz ve tekrar kaydediyoruz.

<template>
  <div id="app">
    <HelloWorld msg="Vue Öğreniyorum"/>
  </div>
</template>

Buraya kadar temel Git komutlarını gördük. Lokal sistemde rahatlıkla bireysel projelerinizde versiyonlama yapabilirsiniz. Bir sonraki makalede ise uzak sunucu depolarında çalışabilmek için gerekli olan git remote, git clone, git pull, git push gibi komutları göreceğiz.


Web Tasarımı ve Web Programlama 2020

Yorum bırak

Yorum