iT邦幫忙

2021 iThome 鐵人賽

DAY 13
0
Modern Web

Follow me! 來一場前端技能樹之旅系列 第 13

[Day 13 - Git] Git版本控管,沒有它救不回來的專案

  • 分享至 

  • xImage
  •  

為什麼要做版本控管?

其實版本控管就是備份的概念,相信大家都有體會過檔案誤刪、當機資料消失的經驗,養成備分的習慣可以減少很多麻煩。在開發的過程中,我們會對程式碼做無數次的新增修改,也可能會同時擁有好幾份程式碼,那要如何管理?在早期習慣用不同的檔名來記錄不同版本的程式碼,但這樣的作法實在是太繁雜又容易混亂,所以為了能夠讓開發者方便管理專案版本,就有了 Git 的誕生。

Git

Git 就是用來進行版本控管的一套系統,會收藏每次檔案修改的內容,紀錄下專案開發的所有歷程

數據庫

Git 會將版本紀錄儲存在一個地方,而這個地方就被稱為數據庫 (Repository),分成本地與遠端。

  • 本地數據庫 (Local Repository):個人使用,在裝置上建立的專屬數據庫。
  • 遠端數據庫 (Remote Repository):像是 GitLab、GitHub 等具有專用伺服器,可以分享給其他人的數據庫。

如何使用Git指令

官網下載安裝完 Git 之後,會在一個叫做終端機的地方輸入指令,如果你是 Windows 系統,就在電腦搜尋「命令提示字元」、Mac 系統就搜尋「Terminal」,就可以開啟終端機視窗。

不過你會看到終端機操作都是在預設的位址,但我們是要在自己新增的專案下面建設 Git 的數據庫,還要使用 cd 移動到目標資料夾的位置。

這邊偷偷告訴大家一個小撇步,如果在 VS Code 進行本地開發的話,那就可以使用它內建的 Terminal 功能。當你在 VS Code 開啟專案資料夾,點選上方選單的 Terminal,可以看到跟命令提示字元差不多的畫面,但不同的是它已經自動幫你將位址移動到目標專案。

Git 基礎操作

建立數據庫

首先要建立好儲存版本的本地數據庫,先新增一個空資料夾,用 VS Code 開啟後在 Terminal 輸入 git init,這樣就能創建好數據庫,監控目錄底下所有的文件狀態。

git init

檢查文件狀態

新增一個檔案 test.txt ,輸入 git status 查看目前 Working directory 中所有檔案的情形,它會偵測到新增的檔案 test.txt,並且告訴你這個檔案還尚未被追蹤,代表它還沒被加入到 Staging area。

git status

追蹤新(修改後)的文件

要將檔案加入到 Staging area,使用 git add <檔案名稱>git add -a,後者能一次性加入全部檔案。這時候再輸入 git status 查看一下檔案的狀態,你就可以看到 test.txt 成功被加入到 Staging area 內。

git add <檔案名稱>
git add -a

提交版本

最後一個步驟就是將 Staging area 的檔案資訊儲存到本地數據庫,可以透過 git commit 來提交一個新的版本紀錄,另外記得要填寫版本訊息。

git commit -m <版本資訊>

查看版本紀錄

這時候輸入 git log 就可以查詢到剛剛提交的版本 test1。

git log

TOC

撤銷事件

前面講解了提交紀錄的流程,但在開發的過程中總是會發生一些失誤,所以 Git 還提供了可以撤銷操作的指令。

  • 修改最近的提交,能夠獲取目前 Staging area 的暫存文件,新增到上次的提交內容:

    git commit --amend
    
  • 讓檔案回復到未提交的狀態:

    git reset HEAD            #操作所有檔案
    git reset HEAD <file>
    
  • 讓檔案回復到未修改的狀態:

    git checkout -- <檔案名稱>
    

Github

Github 是透過 Git 進行版本控制的一個原始碼代管服務平台,除了可以作為遠端數據庫,幫助開發人員儲存管理程式碼,進行版本控制和共同協作;也是各種開源專案的聚集地,可以在上面與其他開發者進行技術交流。

連結遠端數據庫

前面都是在本地進行操作,但當我們需要多人協作專案的時候要共享檔案,就需要連結遠端數據庫,將各自的歷史版本同步更新。在 Github 新增一個 Repository 取得遠端數據庫位址後,使用 git remote add <遠端數據庫簡稱> <url> ,在本地連結遠端數據庫。

git remote add origin https://github.com/peiyunlee/git_test.git

同步遠端數據庫

目前遠端數據庫還沒有東西,因為還沒有做上傳的動作,可以使用 git push 指令,就能將本地的 Commit 推到遠端伺服器更新,這樣兩邊就能同步;相反的,如果想要從遠端數據庫下載別人新增的 Commit,就可以使用 git pull ,不過通常用到這個指令會是在多人協作的情況下。

git push <遠端數據庫簡稱> <本地分支名稱>

Clone 遠端數據庫

那當你想要從遠端數據庫拉一份新的資料,或是下載別人的專案,就可以使用 git clone <url> 指令。

每個 Github 數據庫都會有一串網址

git clone https://github.com/peiyunlee/git_test.git

小結

對於現在的開發者來說,不管你是不是前端領域,學會使用 Git 來進行版本管理是必備的技能,而進入職場後也會和很多人協作開發專案,所以不只要學會文章裡提到的基本操作,你還要進一步學習如何用 Git 與他人同步合作、解決檔案合併可能發生的衝突,才不會成為雷隊友毀掉你與同伴辛苦開發的專案。下一篇文章終於要進入到前半部的結尾小試身手,實戰來打造一個靜態網頁,那我們就明天見囉!

如果文章中有錯誤的地方,要麻煩各位大大不吝賜教;喜歡的話,也要記得幫我按讚訂閱喔❤️

參考資料


上一篇
[Day 12 - Bootstrap] Bootstrap一下,快速建立響應式網站
下一篇
[Day 14 - 小試身手] 用HTML、CSS、JS打造個人網站 (1)
系列文
Follow me! 來一場前端技能樹之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言