---
# System prepended metadata

title: 六角學院 Git 團隊訓練任務練習（六）
tags: [Git]

---

# 六角學院 Git 團隊訓練任務
## 任務六：實務團隊開發流程
來源：
- [Git 團隊訓練任務](https://hackmd.io/8uEPk1GeTBCl8lUQfD5b5Q)
- [Git 任務六](https://hackmd.io/80jiStaUQY-NXSwTYz9Hmg)

---

## 任務流程

- [ ]  1-1：<font color="red">**A 成員**</font> 新增一個新的 Repo，並將 B 成員加入協作。增加 `index.html`、`all.css`，並在 `index.html` 加上一個 h1 標題，並在 `all.css` 將 h1 設計文字為藍色後 **，commit 一個版本**。
    ::: spoiler {state="open"} 提示
    ```bash
    git add .
    git commit -m "新增首頁"
    ```
    :::
    
- [ ]  1-2：<font color="red">**A 成員**</font> 在 `main` 分支上開 `dev` 分支，**並同時將 `main`、`dev` 都 push 上去**。
    ::: spoiler {state="open"} 提示
    ```bash
    git branch dev
    
    # 推送 main
    git push
    
    # 推送 dev
    git push origin dev
    ```
    - 註 1：使用 `git branch dev` 只會新增分支，本地分支仍會停留於 `main`。
    - 註 2：為何推送 `main` 可以直接 push？而推送 `dev` 卻要指定遠端數據庫及分支？這部份可以去瞭解 ==***遠端追蹤分支***== 的概念，可以參考 [補充知識](#補充知識) 提供的資料。
    :::
    
- [ ] 1-3：<font color="blue">**B 成員**</font> clone 下來，在 `dev` 分支上開一個新 feature，名為 `feature/addStyle`，新增一個 h2，並將其文字顏色變成綠色，commit 一個版本後 **，將 `feature/addStyle` 分支進行 git push 動作**。
    
    ::: spoiler {state="open"} 提示
    
    - **Step 1**：切換到 dev 分支。
        ```bash
        # 切換至本地端分支
        git checkout dev
        ```
        或
        ```bash
        # 切換至遠端分支
        git checkout origin/dev
        ```
        註：因為目前本地端 dev 分支與遠端一致，因此這邊切換分支可以使用本地端分支，也可以使用遠端分支。
        
    - **Step 2**：開一個新 feature 分支，並切換過去。
        ```bash
        git checkout -b feature/addStyle
        ```
    
    - **Step 3**：新增一個 h2，並將其文字顏色變成綠色。
    
    - **Step 4**：完成修改之後，一直進行到推送。
        ```bash
        git add .
        git commit -m "增加 h2"
        git push origin feature/addStyle
        ```
    
    :::
    
- [ ] 1-4：<font color="blue">**B 成員**</font> 透過 GitHub ，申請一個 `dev` 合併 `feature/addStyle` 進度的 PR，並指派 A 成員進行審核。
    
- [ ] 1-5：<font color="red">**A 成員**</font> 進行 git fetch ，將 `feature/addStyle` 抓最新版本下來，並在本機上確認成員進度。
    
    ::: spoiler {state="open"} 提示
    
    - **Step 1**：抓最新進度下來。
        ```bash
        # 單抓 `feature/addStyle` 的進度下來
        git fetch origin feature/addStyle

        # 或直接抓全部下來也可以
        git fetch
        ```
        
    - **Step 2**：切換到 feature 遠端分支，查看程式狀態。
        ```bash
        git checkout origin/feature/addStyle
        ```
    :::
    
- [ ] 1-6：<font color="red">**A 成員**</font> 確認沒問題後，審核 PR 通過。

- [ ]  1-7：<font color="red">**A 成員**</font> git fetch `dev` 後，開一個新的 `feature/editTitle` 分支，修改 `head` 標題為 `修改標題`，commit 一個版本後便 **，將 `feature/editTitle` 分支進行 git push 動作**。
    
    ::: spoiler {state="open"} 提示
    - **Step 1**
        ```bash
        # 抓取 dev 最新進度
        git fetch origin dev
        
        # 切換到遠端 dev 分支
        git checkout origin/dev
        
        # 開新 feature 分支並切換過去
        git checkout -b feature/editTitle
        ```
        
    - **Step 2**：修改 `head` 標題為 `修改標題`，並一直進行到推送。
        ```bash
        git add .
        git commit -m '修改 head title'
        git push origin feature/editTitle
        ```
        
    :::
    
- [ ] 1-8：<font color="red">**A 成員**</font> 透過 GitHub ，申請一個 `dev` 合併 `feature/editTitle` 進度的 PR，並指派 B 成員進行審核。

- [ ]  1-9：<font color="blue">**B 成員**</font> git fetch `dev` 後，開一個新的 `feature/editColor` 分支，修改 h1 標題顏色為紅色，commit 一個版本後便 **將 `feature/editColor` 分支進行 git push 動作**。
    
    ::: spoiler {state="open"} 提示
    
    - **Step 1**
        ```bash
        git fetch origin dev
        git checkout origin/dev
        git checkout -b feature/editColor
        ```
    
    - **Step 2**：修改 h1 標題顏色為紅色，一直進行到推送。
        ```bash
        git add .
        git commit -m '修改 h1 顏色'
        git push origin feature/editColor
        ```
        
    :::
    
- [ ] 1-10：<font color="blue">**B 成員**</font> 透過 GitHub ，申請一個 `dev` 合併 `feature/editColor` 進度的 PR，並指派 A 成員進行審核。
    
- [ ] 1-11：<font color="blue">**B 成員**</font> 進行 git fetch ，將 `feature/editTitle` 抓最新版本下來，並在本機上確認成員進度。
    
    ::: spoiler {state="open"} 提示
    ```bash
    git fetch origin feature/editTitle
    git checkout origin/feature/editTitle
    ```
    :::
    
- [ ] 1-12：<font color="blue">**B 成員**</font> 確認沒問題後，審核 PR 通過。
    
- [ ] 1-13：<font color="red">**A 成員**</font> 進行 git fetch ，將 `feature/editColor` 抓最新版本下來，並在本機上確認成員進度。
    
    ::: spoiler {state="open"} 提示
    ```bash
    git fetch origin feature/editColor
    git checkout origin/feature/editColor
    ```
    :::
    
- [ ] 1-14：<font color="red">**A 成員**</font> 確認沒問題後，審核 PR 通過。
    
- [ ] 1-15：<font color="red">**A 成員**</font> 審核成功後，申請一個 `main` 合併 `dev` 進度的 PR，用 GitHub Pages 觀看 `main` 分支的頁面是否有出現預期網頁畫面。
<br>

## 通關檢核點
- [ ]  A、B 成員與 GitHub Repo 都有相同的 commit 數量
- [ ] 預期線圖有符合
<br>

## 預期線圖
![](https://hackmd.io/_uploads/B1mdQj1G6.png)

---

## 補充知識
- [Git-本地分支、遠端分支、遠端追蹤分支](https://ithelp.ithome.com.tw/articles/10211819)
- [3.5 Git 分支 - 远程分支 - 跟踪分支](https://git-scm.com/book/zh/v2/Git-%E5%88%86%E6%94%AF-%E8%BF%9C%E7%A8%8B%E5%88%86%E6%94%AF#:~:text=origin/serverfix%E3%80%82-,%E8%B7%9F%E8%B8%AA%E5%88%86%E6%94%AF,-%E4%BB%8E%E4%B8%80%E4%B8%AA%E8%BF%9C%E7%A8%8B)
- [10.3 Git 内部原理 - Git 引用](https://git-scm.com/book/zh/v2/Git-%E5%86%85%E9%83%A8%E5%8E%9F%E7%90%86-Git-%E5%BC%95%E7%94%A8)

