Git GUI- GitKraken 介紹 & 推薦

From GitKraken

目前有這麼多 GIT GUI Tool，我們該怎麼選擇呢？
本篇文章將會介紹 “GitKraken” ，不管您是否已經正在使用 GitKraken，或者從沒有用過的人，不妨留下來看一下，也許有些功能你沒發現呢!? 文章裡也有包含的 GitKraken 教學喔!

馬上來看看 GitKraken 有什麼好用的地方吧！

Git Client - Glo Boards | GitKraken

題外話一下

從 GitKraken 6 的版本開始，我覺得最大的困擾是「免費限制 」將不能再使用「Work with private repos」了！！！！ R…I…P

官方 Blog 有提到這項改變，如下：

Free Git Client for Public Repos

So we decided to eliminate the confusion in this way:

• The free version of GitKraken can only open public repos
• For anything else, you need a paid version

https://blog.axosoft.com/gitkraken-v6-0/#pricing-changes

詳細的 Pricing 請查看以下連結

Free Git Client & Paid Plans | GitKraken

解決辦法：可以先安裝回 GitKraken 舊的版本(但過沒多久又會自動更新。 汗~)

先談談為何要使用 GUI 呢？

自從熟悉 Git command line 後，發現往往在下指令的過程，累積起來其實花很多時間，例如你會重複的打這些指令「git checkout…」、「git add…」、「git commit…」、「git merge…」、「git log…」等，如果有 GUI 介面能夠協助我操作，那會有多棒呢？

備註：建議先熟指令之後再來使用 GUI，因為很多人在學習 Git 時，會直接搭配 SourceTree, SmartGit, Fork, GitHub Desktop …等來做操作，而如果其他環境是不允許你裝 GUI 時，是不是就沒辦法使用 Git 了？所以你就先學會下 command line! !!

為什麼會選擇使用 GitKraken 呢？

1. 起初單純只是被 GitKraken 漂亮的 GUI 介面吸引了！！！ 沒錯！！！
2. 實際操作後發，發現它有幾個功能是我蠻需要的(例如：view as tree)
3. 能直接在 GitKraken 進行 coding
4. 支援程式語言的「 Syntax Highlight」，如下：

(左圖) PHP / (中圖) scss / (右圖) javascript

GitKraken 有什麼缺點？

1. 速度比其他 GUI 慢一些，例如 Push, Pull…等，以及一些基本操作
2. Branch 線圖會轉來轉去會覺得很亂，用其他 GUI 或者打指令查看，反而沒有這問題，如下：
   (1) 使用同樣的 Repository “Laravel”
   (2) 查看同樣的 “Merge branch ‘master’ into develop”

(左圖) GitKraken / (中圖) Git Fork/ (右圖) iTerm2 cmd

也許有人會想問，那其他GUI不好用嗎？

我自己還有使用 SmartGit, SourceTree, Git Fork…等，但最後我是選擇 Git Fork 與 GitKraken 輪流使用～

該回歸主題啦～

開始使用 GUI — GitKraken

本篇文章不會把所有 GitKraken 功能全部介紹出來，只會挑一些可能對大家有幫助的部分做介紹

你可以透過 Open 或 Clone 或Init 的方式，來開始使用 Repository

如果你不喜歡預設顯示的圖案頭像

到UI Preferences → Display author initials instead of avatars (打勾)

（左圖）以 “GitKraken 圖像” 顯示 （右圖）以 “作者姓名首字母” 顯示

★查看 commit 共有哪些差異檔案

當您選擇任何一筆 commit 時，GitKraken 提供兩種（Path, Tree）檢視方式，讓你方便查看異動了哪些檔案（我特別喜歡 Tree 的檢視方式）

橘色：modified、 綠色：added、 紅色：deleted、 藍色：renamed

1. Path（路徑清單字串）基本款
通常每一種 GUI 都有這個 view as path 功能（非常普遍）

View as path

2. Tree（樹狀目錄）
比 Path 更容易看出檔案位置，但資料夾預設會先收起來

通常其他 GUI 一樣有 view as tree 功能（例如: git-fork, sourcetree…等)
但 GitKraken 不一樣的如下：

1. 清楚知道目錄檔案異動狀況（下方左圖）
   注意到資料夾右邊「icon」及「數字」，是不是很棒呢！
2. View all files，查看所有目錄與檔案（下方右圖）

這是一個非常大的優點，對於如果專案不是使用 git 部署的情況，只能使用 FTP 上傳，這時候你需要知道異動目錄裡有多少支? 哪幾支? 檔案需要上傳覆蓋~

View as tree

你也可以選取多個 commit 來檢視異動

★查看 commit 的差異檔案的情況

當你選擇某一隻檔案時，GitKraken 可以隨時切換「四種模式（Hunk, Inline, Split, Blame File）」來查看差異

1. Hunk View

「只顯示差異區塊」然後「分上下」來看差異

Hunk View

2. Inline View

跟Hunk View差不多，一樣屬於「分上下」來看差異，但 Inline View 會將「程式碼每一行」顯示出來，所以當這支如果很多行程式碼，最後一行有變動，你就需要滑到最底部

Inline View

3. Split View

「分割成左右視窗」，跟 Inline View 一樣將程式碼全部呈現出來

Split View

4. Blame File View

查看該檔案所有的 history commit

Blame File View

使用 Git Flow

Initialize Git Flow

要使用 Git Flow 前，必須先進行初始化！

Start/Finish - Feature/Release/Hotfix

回到操作畫面，可以在左上角看到多了「GIT FLOW」 區塊，點擊「▷」按鈕，就會向右延伸額外的區塊

Start Feature

start feature

Finish Feature

有兩種方式可以將分支合併回去

1. 直接在 Finish 下方點擊 “Feature”，你可以下拉選擇要 Finish 的分支，最後按下 “Finish Feature”

2. 直接點擊 “Finish feature/demo” 按鈕，在點擊 “Finish Feature” 即可

其他功能介紹一下

可以拖拉中間軸心

提示 git flow branch、local branch、remote branch、tags、submodules 數目

使用 Authentication SSH 連線

Pull 一樣能選擇 [fast forward if possible]、[fast-forward only]、[rebase]

右鍵選單功能（一般常用到的指令）

結尾

GitKraken 還有很多功能，但跟其他GUI都差不多，因此就先介紹到這邊，希望這篇能幫助到您～找到適合自己的 GUI Tool！！