iT邦幫忙

2025 iThome 鐵人賽

DAY 24
0
Modern Web

設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!系列 第 24

24 改錯程式還有回頭路?搞懂 Git 不再迷航!

  • 分享至 

  • xImage
  •  

前言

在開發過程中,我們常會遇到開發功能告一個段落,想先記錄當前進度再處理其他專案項目的情況。又或者是想要知道「這個功能是什麼時候開發的?動了哪些檔案?」這時候,一個好用又熱門廣泛的版本控制工具 —— Git 就能派上用場啦!它可以告訴我們剛才假設的所有問題,不只能幫我們追蹤檔案歷程、還原版本,甚至能協助多人協作,一起來看看怎麼使用吧!🤩

安裝Git

  1. 請先前往 Git 網站,依據裝置的作業系統,下載並安裝對應版本的 Git。

  2. 安裝完成後開啟 Git,會看到以下畫面。
    24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示1

建立專案 Git 環境

  1. 請先打開終端機,切換路徑到要進行版本控制的專案目錄。
cd <專案路徑>

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示2
(後面出現的黃色字樣 就是目前所在的路徑)

  1. 確認專案中是否已有 .gitignore 檔案,如果還沒有記得先補上!這份檔案是用來排除不需要進入版控的檔案與資料夾,例如 node_modules.vscode 等。

  2. 初始化 Git 版本控制環境,讓 Git 開始記錄版本變化。

git init

產生成功會在當前目錄裡建立 .git 隱藏檔
24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示3

  1. 將目前專案內的所有檔案加入索引。
git add .
  1. 接著輸入要產生commit的訊息。
git commit -m "<訊息內容>"
  1. 完成以上步驟後,這份專案就已成功建立 Git 紀錄啦!可以打開 VS Code → 原始檔控制 → View Git Graph,看到專案裡建立好的 commit 紀錄。
    24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示4

新增其他分支(branch)

在多人開發或多功能開發的情境下,我們會使用「分支(branch)」來避免大家擠在同一條線上開發,就像所有人都擠在一張考卷上寫字,一定會打架、蓋到別人的東西、擦不乾淨、很難收尾
因此,常見的做法是:用分支來區分「個人開發功能」、「正式上線版」、「測試環境版」 等等開發環境。在「個人開發功能」改完先在自己分支測試,沒問題再合併(merge)到「測試環境版」比較穩定、不會出錯。

我們這邊來分享如何新增自己的分支以及合併其他分支進度:

  1. 在專案中建立一個新分支。新增分支的時候要注意,請先確認目前所在的分支,因為新分支會從當前進度複製。
cd <專案路徑> // 如果目前已在專案路徑,這步可以不做。
git branch <分支名稱>

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示5
(多新增了 dev 分支)

下方以新增 dev 分支做舉例:

  1. 如果要切換到 dev 分支進行開發,使用:
git checkout dev
  1. dev 分支中開發與測試完成,新增 commit 後,如果要合併回主分支 master,請先切回主分支,再執行合併:
    這樣就完成了將 dev 的進度合併到 master
git checkout master
git merge dev

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示6
(切換至 master 合併了 dev 分支進度)

  1. 如果最後進度合併完,dev 分支已不再需要,可以這樣做刪除。
git branch -d dev

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示7
(刪除 dev 分支)

  1. 想查看目前專案裡有哪些分支,也可以輸入:
git branch

24 改錯程式還有回頭路?搞懂 Git 不再迷航!- 圖示8

常見 Git 提交訊息規範

在推送分支、撰寫 commit 訊息時,可以依照這次推送的進度內容,標記屬於哪一種類型。以下整理出幾個常見的:

類型名稱 說明
feat 為專案添加新的功能
fix 修復專案 Bug
hotfix 緊急修復處理專案 Bug
docs 修改了專案的文件、註釋或任何與程式碼邏輯無關的內容
refactor 優化或重構專案程式碼
test 新增或修改測試程式
style 修改程式中縮排、分號等格式,不影響邏輯
ci 修改持續整合或持續部署的相關設定

不過最終還是要以團隊規範為主,建立一致的開發習慣,才能讓專案協作更順暢!

結語

這篇分享了如何在專案中建立 Git 版本控制環境、紀錄開發進度、以及善用分支管理來協作開發。不管是單人開發還是多人協作,Git 都是不可或缺的好夥伴,它很好使用的備份工具,是程式開發過程中的「時光機」,非常方便!

當你遇到問題、需要回溯版本,或者想知道某段程式是什麼時候加進來的,Git 都能幫你解惑。而養成良好的版本控制習慣,更會讓開發流程順暢、省力。
下一篇我們會介紹到如何將本地專案推上GitHub,敬請期待 🤩!

參考資料與延伸閱讀

Git 安裝來源
Commits 參考


上一篇
23 如何掌握網站表現?設定 Google Analytics 追蹤成效
下一篇
25 從本地到雲端:把你的專案輕鬆搬上 GitHub!
系列文
設計 x 開發:從 Figma 到 Vue,打造 LINE 互動形象網站!26
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言