<style> .reveal table, .reveal table th, .reveal table td { border: 1px solid; font-size: 33px; text-align: center; vertical-align: middle; } </style> # 如何使用 Git? (本地篇) --- ## 目錄 - Git基本介紹 - 如何開始使用 - 環境設置 - 檔案管理 - Commit管理 - 分支管理 - 暫存工作區 --- ## Git基本介紹 ---- ### 那些年一起玩單機遊戲 <img src="https://i.imgur.com/p7FZbA3.gif" height="400"> ---- ### Git 行為描述 | Git | Game Boy | | -------- | -------- | | Commit | 存檔 | | Checkout | 讀檔 | | Branch | 分歧點 | | 遠端倉庫(Repository) | 遊戲平台 | --- ## 如何開始使用 ---- ### 安裝 Git <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px;margin-bottom:10px;">可以到<a href="https://git-scm.com/downloads">官網</a>選擇目前作業系統環境進行安裝</li> <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px">Mac OS 作業系統可以使用 HomeBrew 安裝</li> ```= /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)" brew install git ``` ---- ### 初始化資料夾 ```= # 建立空資料夾 mkdir git-demo # git 初始化 git init git-demo ``` --- ## 環境設置 ---- ### 查看 Git 設定 <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px">查看 global 的 config (全域)</li> ```= git config --list (預設是global) git config --global --list vim ~/.gitconfig ``` <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px">查看 local 的 config (專案)</li> ```= cd 專案路徑 git config --local --list vim 專案路徑/.git/config ``` ---- ### 常用的設定 <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px">設定用戶名及信箱</li> ```= git config --global user.name <username> git config --global user.email <email> ``` <li style="text-align:start;padding-left:50px;font-weight:600;font-size:35px">命令的別名</li> ```= git config --global alias.<aliasname> <commandname> # example git config --global alias.st status ``` <p style="text-align:start;color:red;font-size:25px;padding-left:50px;margin-top:30px;">* 如果 --global 改成 --local 就是當前專案的設定 </p> --- ## 檔案管理 ---- <img src="https://i.imgur.com/bp5hKoX.png" width="580" height="500"> ---- ### 未被追蹤的檔案 <img src="https://i.imgur.com/y3mEGSZ.png" width="800" height="160"/> ---- ### 被更動但尚未要提交的檔案 <img src="https://i.imgur.com/VE6UUqP.png" width="800" height="160"/> ---- ### 將要提交的檔案 <img src="https://i.imgur.com/GescWTb.png" width="800" height="160"/> <p style="text-align:start;font-size:25px;padding-left:75px;font-weight:600;">* 在此狀態用 git reset HEAD 會還原原始狀態(未追蹤檔案、更動尚未被提交)</p> ---- ### 查看檔案 ```= # 查看目前 unstaged 檔案 git status # 查看已提交的檔案內容 git show <hash id> # 查看尚未提交的檔案內容 git diff <file> # 查看歷史紀錄 git log ``` ---- ### 新增/提交檔案 ```= # 將全部的檔案設為staged git add . 或者 git add -A # 將單一的檔案設為staged git add <file> # 提交訊息 git commit -m <message> ``` ---- ### 刪除檔案 <li style="text-align:start;padding-left:60px;font-weight:600;font-size:35px">前置條件為已經進入 git 版控的歷史紀錄</li> ```= # 遠端與本地端都刪除檔案 git rm <file> # 遠端刪除檔案，但本地端依然保留著 git rm --cached <file> ``` ---- ### 檔案還原 <li style="text-align:start;padding-left:60px;font-weight:600;font-size:35px">前置條件為尚未提交的狀態</li> ```= # 還原未修改前的檔案內容(單一檔案) git checkout -- <file> # 將所有未提交的檔案還原未修改的內容 git reset --hard HEAD ``` ---- ### 忽略檔案 <div style="display:flex;justify-content:space-between"> <p style="text-align:start">新增 .gitignore 檔案，把該目錄想忽略的檔案路徑寫在該檔案裡面。</p> <img src="https://i.imgur.com/L7oesL4.png" width="400" height="430" style="margin-left:30px;"> </div> --- ## Commit 管理 ---- ### 什麼是 Commit？ <ul style="margin-left:25px;"> <li style="text-align:start;font-weight:600;font-size:33px">為提交後的檔案“標記訊息”</li> <li style="text-align:start;font-weight:600;font-size:33px">每一個 commit 內容只記錄"修改"的程式內容，並"不是完整"的code</li> </ul> <img src="https://i.imgur.com/cM1ayI1.png"> ---- ### 關鍵字 HEAD <li style="text-align:start;padding-left:45px;font-weight:600;font-size:35px">HEAD 為 git 的關鍵字，代表目前 commit 所在的位置 </li> <li style="text-align:start;padding-left:45px;font-weight:600;font-size:35px">HEAD^ 或 HEAD~1 代表上一個 commit 位置 </li> <li style="text-align:start;padding-left:45px;font-weight:600;font-size:35px">HEAD^^ 或 HEAD~2 代表上兩個 commit 位置 </li> <p style="text-align:start;font-size:35px;margin-left:90px;margin-top:0px;">以此類推...</p> <img src="https://i.imgur.com/Eci51RV.png" width="850" height="150"> ---- ### Reset 還原 <li style="text-align:start;padding-left:45px;font-weight:600;font-size:30px">透過 reset 可以隨心所欲還原最初的內容</li> <li style="text-align:start;padding-left:45px;font-weight:600;font-size:30px">可以搭配 HEAD 讓我們不用死記 commit id</li> ```= # 回到上一次 commit，還原為 modified、untracked 檔案 git reset HEAD^ # 回到上一次 commit，還原為 changes to be commited 檔案 git reset --soft HEAD^ # 回到上一次(或是指定) commit，並強制清除第一個已提交內容 git reset --hard HEAD^/<commit id> ``` <p style="color:red;font-size:30px;text-align:start;margin-left:40px;">*建議在操作前先將工作區的程式暫存 (stash) 起來</p> ---- ### 找回消失的 commit <ul style="margin-left:10px;"> <li style="text-align:start;font-weight:600;font-size:30px">使用 git reflog 來查看 HEAD 的歷史紀錄，至少可以保留一個月</li> <li style="text-align:start;font-weight:600;font-size:30px">透過 git reset --hard <commit id> 還原</li> </ul> <img src="https://i.imgur.com/eqcehou.png" height="400"> ---- ### 修改已提交的內容 <p style="text-align:start;margin-left:30px;font-size:33px;">有時候 commit 訊息打錯，想要重新修改訊息，以下有三種方式</p> <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">第一種</li> ```= git reset --soft HEAD^ git commit -m '訊息內容' ``` <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">第二種</li> ```= git commit --amend -m ``` <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">第三種</li> ```= git rebase -i <commit id> ``` ---- ### 何謂 cherry-pick <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">cherry-pick 為少量操作(複製貼上) commit</li> <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">每一個 commit 為紀錄修改的片段程式碼代表一個物件</li> ```= git cherry-pick <commit id> ``` ---- ### 何謂 rebase <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">重新定義基準點</li> <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;">在操作特定 commit 時，需要加上 -i (interactive) 參數進行互動模式</li> ```= git rebase -i <commit id> ``` <img src="https://i.imgur.com/YpCMzVZ.png" height="350"> ---- ### 何謂 revert <li style="text-align:start;font-weight:600;font-size:27px;padding-left:30px;">實作概念很像是數學運算的 100 + (-100) = 0</li> <li style="text-align:start;font-weight:600;font-size:27px;padding-left:30px;">當發現某個 commit 有問題想要拿掉，而且是前面已經很多 commit 的情況</li> ```= git revert <commit id> ``` <img src="https://i.imgur.com/INTGt4P.png" style="margin-left:20px;"> ---- ### 互動模式(ㄧ) <p style="text-align:start;font-size:33px;">當使用 cherry-pick/rebase/revert 操作 commit 順序時，有時會遇到衝突要解決，操作方式都一樣</p> <li style="text-align:start;font-weight:600;font-size:27px;padding-left:25px;list-style:none;">1. 遇到衝突顯示畫面</li> <img src="https://i.imgur.com/rebawA6.png"> ---- ### 互動模式(ㄧ) <li style="text-align:start;font-weight:600;font-size:27px;padding-left:25px;list-style:none;">2. 透過 git status 查看檔案狀態</li> <img src="https://i.imgur.com/bf7YvgU.png"> ---- ### 互動模式(ㄧ) <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;list-style:none;">3. 解完衝突</li> ```= git add -u git cherry-pick/rebase/revert --continue ``` <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;list-style:none;">4. 放棄操作</li> ```= git cherry-pick/rebase/revert --abort ``` ---- ### 互動模式(二) <li style="text-align:start;font-weight:600;font-size:27px;padding-left:25px;list-style:none;">1. 有時操作時會出現未修改變更的提示</li>  ---- ### 互動模式(二) <li style="text-align:start;font-weight:600;font-size:27px;padding-left:25px;list-style:none;">2. 使用 git status 查看狀態</li>  ---- ### 互動模式(二) <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;list-style:none;">3. 允許未變更的 commit</li> ```= git commit --allow-empty ``` <li style="text-align:start;font-weight:600;font-size:27px;padding-left:50px;list-style:none;">4. 放棄操作</li> ```= git cherry-pick/rebase --abort ``` <p style="font-size:30px;text-align:start;color:red;margin-top:40px;margin-left:20px;">*不能使用 --continue 原因是未解決衝突，如果要繼續只能用 --allow-empty</p> --- ## 分支管理 ---- ### Commit tree <ul> <li style="text-align:start;font-weight:600;font-size:35px;">在 Git 裡面，每一個 commit 都是一個節點，當把這些節點一個一個串起來最後組成就是 commit tree</li> <li style="text-align:start;font-weight:600;font-size:35px;">每個節點(commit id)都是獨一無二的，都可以另外長出自己的分支</li> </ul> ```= o---o---o feature 2 / o---o---o---o---o---o---o---o---o---o---o develop \ / o---o---o---o feature 1 ``` ---- ### 何謂分支 <ul> <li style="text-align:start;font-weight:600;font-size:35px;">建立分支其實就是把 commit 貼上標籤，相反的刪除分支就是把標籤撕掉一樣</li> <li style="text-align:start;font-weight:600;font-size:35px;">就算刪除分支該 commit 也沒有因此刪除也可以透過 reflog 查看歷史紀錄救回來</li> </ul> <div style="display:flex;justify-content:center;"> <img src="https://i.imgur.com/bw3RBAW.png" height="300"> </div> ---- ### 查看/切換分支 ```= # 顯示本地端所有分支 git branch # 顯示本地端與遠端所有分支 git branch -a # 切換分支 git checkout <branch name> ``` ---- ### 建立分支 ```= # 建立分支 git branch <new branch name> # 建立分支並切換 git checkout -b <new branch name> # 指定 commit id 建立分支並切換 git checkout -b <new branch name> <commit id> # 指定遠端的分支建立並切換 git checkout -b <new branch name> origin/<branch name> ``` ---- ### 刪除分支 ```= # 刪除分支 git branch -d <branch name> # 強制刪除分支 git branch -D <branch name> # 刪除後的分支復原 git branch <new branch> <commit id> ``` <img src="https://i.imgur.com/6qwIpAY.png" height="177"> ---- ### rebase 合併分支 <li style="text-align:start;font-weight:600;font-size:35px;padding-left:50px;">重新定義分支基準點</li> ```= git checkout feature/xxx git rebase develop ``` ---- ### rebase (情況一) <li style="text-align:start;font-weight:600;font-size:35px;padding-left:20px;list-style:none;">1. 首先往上找兩個分支的交會點</li> <img src="https://i.imgur.com/PTK4JuN.png"> <li style="text-align:start;font-weight:600;font-size:35px;list-style:none;">2. 再把 develop 有 feature 沒有的 commit 接到後面</li> <div style="display:flex;justify-content:center;"> <div> <span style="font-size:30px;">一開始</span> <img src="https://i.imgur.com/VXJvilB.png" width="500" height="100"> </div> <div> <span style="font-size:30px;">結果</span> <img src="https://i.imgur.com/PSgNAEO.png" width="500" height="100"> </div> </div> ---- ### rebase (情況二) <li style="text-align:start;font-weight:600;font-size:35px;padding-left:20px;list-style:none;">1. 首先往上找兩個分支的交會點</li>  <ul> <li style="text-align:start;font-weight:600;font-size:35px;list-style:none;">2. 把 develop 有 feature 沒有的 commit 接到後面，<span style="color:red;">再把本身分支的 commit 接到最後面</span></li> </ul> <div style="display:flex;justify-content:center;"> <div> <span style="font-size:30px;">一開始</span> <img src="https://i.imgur.com/tt5sB2H.png" width="500" height="100"> </div> <div> <span style="font-size:30px;">結果</span> <img src="https://i.imgur.com/8Hef719.png" width="500" height="100"> </div> </div> ---- ### merge 合併分支 <li style="text-align:start;font-weight:600;font-size:35px;padding-left:50px;">根據 commit 的 timestamp 不同來進行合併動作</li> ```= # FastForward 合併不會多一個 merge commit git merge --ff <branch name> # No FastForward 合併會多一個 merge commit git merge --no-ff <branch name> ``` ---- ### merge 合併分支 <li style="text-align:start;font-weight:600;font-size:30px;padding-left:170px;">No FastForward 合併結果</li> <img src="https://i.imgur.com/SbPtxhD.png" height="450"> ---- ### 復原合併刪除後的分支 <ul style="margin-left:70px;"> <li style="text-align:start;font-weight:600;font-size:30px;">由於合併會紀錄來源分支的 commit id，還記得前幾章提到用 commit id 建立branch</li> </ul> ```= git checkout -b feature/add_disassemble_frontend 5413927 ``` ---- ### rebase 與 merge 比較 <table> <thead> <tr> <th>Merge</th> <th>Rebase</th> </tr> </thead> <tbody> <tr> <td>容易理解</td> <td>不容易理解</td> </tr> <tr> <td>當發生衝突的時候，全部在 Merge Commit 一次解完</td> <td>Rebase 的過程中，每次 commit 發生衝突都要解一次衝突</td> </tr> <tr> <td>commit tree 會有兩個 parents，不容易 trace code</td> <td>commit 路徑單純，容易 trace code，或回到指定版本</td> </tr> <tr> <td>過多的 Merge Commit 會看起來很亂</td> <td>分支乾淨一致</td> </tr> </tbody> </table> --- ## 暫存工作區 ---- ### 常用指令 ```= # 列出暫存區所有清單 git stash list # 將目前 modify 的檔案暫存，如果是 untracked 檔案需先 add git stash # 將在暫存區最新的 pop 出來 git stash pop # 指定的編號 pop 出來 git stash pop stash@{num} # 將所有暫存區清空 git stash clear # 指定的編號刪除 git stash drop stash@{num} ``` --- ## 冷知識 ---- ### HEAD 也有縮寫 <li style="text-align:start;font-weight:600;font-size:30px;padding-left:50px;">可以用 @ 來代替 HEAD</li> ```= git reset HEAD^ git reset @^ ``` ---- ### ORIG_HEAD 是什麼 <p style="font-size:35px;text-align:start;margin-left:50px;">當你在做一些比較「危險」的操作（例如像 merge、rebase 或 reset 之類的），Git 就會把 HEAD 的狀態儲存，讓你隨時可以跳回危險動作之前的狀態。</p> <li style="text-align:start;font-weight:600;font-size:30px;padding-left:50px;">當你誤刪掉某一隻commit</li> ```= git reset --hard <commit id> ``` <li style="text-align:start;font-weight:600;font-size:30px;padding-left:50px;">ORIG_HEAD 可以馬上復原</li> ```= git reset --hard ORIG_HEAD ``` ---- ### .git 資料夾是什麼  --- ## 情境題 ---- ### (情境一) 重新整理 commit 順序 ```= # 原來順序 P1 -> P2 -> P3 -> P4 -> P5 # 調整後的順序 P1 -> P2 -> P4 -> P5 -> P3 ``` ---- ### 解法 ```= # 先回到未改變順序的節點 git reset --hard P2 # 在用 cherry-pick 調整順序 git cherry-pick P4 P5 P3 ``` ---- ### (情境二) 將多個 commit 合併為一個 ```= # 原來的 commit tree P1 -> P2 -> P3 -> P4 # 整理後的 commit tree P1 -> P2 -> P5 ``` ---- ### 解法 ```= # 開啟 rebase 互動模式 git rebase -i P2 ``` <img src="https://i.imgur.com/tyBilhs.png" height="420"> ---- ### (情境三) 切換版本 <li style="text-align:start;font-weight:600;font-size:33px;padding-left:50px;list-style:none;">1. 切換 commit 並不會清除內容</li> ```= git checkout <commit id> ``` <img src="https://i.imgur.com/U5KwXE7.png" height="350"> ---- ### (情境三) 切換版本 <li style="text-align:start;font-weight:600;font-size:33px;padding-left:50px;list-style:none;">2. 切換 commit 並清除內容</li> ```= git reset --hard <commit id> ``` <img src="https://i.imgur.com/07slICU.png" height="80"> ---- ### (情境四) 已被 git 追蹤的檔案如何移除 ```= 1. 本地端跟遠端一起刪掉檔案 git rm <file> 2. 本地端保留，遠端刪掉檔案 git rm --cached <file> ``` ---- ### (情境五) 更新分支並合併分支 <li style="text-align:start;font-weight:600;font-size:33px;padding-left:50px;list-style:none;">1. 使用 rebase 重新定義 feature 起始節點</li> ```= git checkout feature/xxx git rebase develop ``` <li style="text-align:start;font-weight:600;font-size:33px;padding-left:50px;list-style:none;">2. 開發完要合併回 develop</li> ```= git checkout develop git rebase feature/xxx ``` --- ### 相關連結 - [連猴子都能懂的git](https://backlog.com/git-tutorial/tw/reference/config.html) - [Git book](https://zlargon.gitbooks.io/git-tutorial/content/) - [30 天精通 Git 版本控管](https://github.com/doggy8088/Learn-Git-in-30-days/blob/master/zh-tw/README.md) - [為你自己學Git](https://gitbook.tw/chapters/config/user-config.html) - [Learning Branching](https://learngitbranching.js.org/?NODEMO)