iT邦幫忙

2022 iThome 鐵人賽

DAY 1
0
自我挑戰組

30 天線上自學前端系列 第 22

[Day 22] [版控] 簡單介紹版本控制和 Git

  • 分享至 

  • xImage
  •  

我有時覺得很奇怪,挑戰項目是自學前端,但是都在發後端的文章是怎樣 XD
我看了等到這版控的 module 過了之後真的會開始做部落格的~(嗚嗚嗚)

OK~ 首先是版本控制。

到底為什麼要版本控制呢?

假設我現在寫了一份很簡單的 code,想用 git 來做版本控制。這個好處就是,當我寫了第一版、第二版、第三版.... 等到第四版時,發現我第三版的邏輯才是對的,第四版都是錯的。此時,只需要用 git 來 roll back 就可以了,也可以用先前的版本來對比哪裡有錯,所以不至於整個重寫一遍。

除了 git 以外有很多工具都可以做到這件事,但 git 是最多人使用的。

如何在 local 使用版本控制

以下是課程簡單介紹 git 的實作方式:

  • 先在桌面上 mkdir Story,然後 cd 到 Story 這個資料夾。
  • 使用 touch 建立一個名為 chapter 1 的 txt 檔,用 open 用文字編輯 app 打開 / vim 編輯輸入一些內容。

這時,要來使用 Git local repository 來開始記錄這些檔案的變動。

要初始化 git,只要在 terminal 這樣寫就可以:

git init

接著會發現這樣的 feedback:

$ git init
hint: Using 'master' as the name for the initial branch. This default branch name
hint: is subject to change. To configure the initial branch name to use in all
hint: of your new repositories, which will suppress this warning, call:
hint: 
hint:   git config --global init.defaultBranch <name>
hint: 
hint: Names commonly chosen instead of 'master' are 'main', 'trunk' and
hint: 'development'. The just-created branch can be renamed via this command:
hint: 
hint:   git branch -m <name>
Initialized empty Git repository in /Users/Desktop/Story/.git/

這代表我們已經初始化成功,還有在 Story 這資料夾裡空出 Git repository。

不過這在資料夾裡是看不到的,如果要查看,可以用 ls -a 就可以看到所有的檔案:

$ ls
chapter1.txt
/* 只會有一個檔案


$ ls -a
.               ..              .git            chapter1.txt
/* 加上"-a"的flag就可以看到全部

不過光是這樣還是不會追蹤。這時可以先看 git status 的狀況:

$ git status
On branch master

No commits yet

Untracked files:
  (use "git add <file>..." to include in what will be committed)
        chapter1.txt

nothing added to commit but untracked files present (use "git add" to track)

透過以上,我們知道現在還要加上 git add

$ git add chapter1.txt

而得到的結果會像是這樣:

$ git status          
On branch master

No commits yet

Changes to be committed:
  (use "git rm --cached <file>..." to unstage)
        new file:   chapter1.txt

接著就是要 commit 了:

git commit -m "initialize commit"

接著要查看 git 結果的話,就可以使用 git log

 git log
commit [HASH] 7c9fc0881a696d4fe4515a47ef0d0e (HEAD -> master)
Author: cindy <MacBook-Pro.local>
Date:   Thu Sep 22 22:33:54 2022 +0800

    initialize commit   <-- commit message

第二階段是再創兩個 txt 檔案,分別是 chapter2.txt 和 chapter3.txt,然後用 git status 來看看現在的狀態,會發現新的檔案沒有在追蹤版本的範圍內,用 git add . 一次把兩個檔案加入追蹤裡頭。

此時再 commit 這兩個檔案,就是第二個儲存點(save point)。用 git log 來檢查看看:

% git log
commit [HASH] 27358dde66daab4e2beca744321 (HEAD -> master)
Author: cindy <MacBook-Pro.local>
Date:   Thu Sep 22 22:43:01 2022 +0800

    add 2 txt

commit [HASH] fc7c9fc0881a696d4fe4515a47ef0d0e
Author: cindy <MacBook-Pro.local>
Date:   Thu Sep 22 22:33:54 2022 +0800

    initialize commit

可以特別注意的是 (HEAD -> master),這是目前我們所在的位置。


版本控制的好處

OK~ 假如現在我把 chapter3.txt 的內容改掉,然後又按到儲存,這個檔案就毀了。不過剛剛有版本控制,所以現在只要回覆(revert)他就可以了。

可以先用 git status 確認現在檔案的狀況:

$  git status       
On branch master
Changes not staged for commit:
  (use "git add <file>..." to update what will be committed)
  (use "git restore <file>..." to discard changes in working directory)
        modified:   chapter3.txt

有改到 chapter3.txt,但沒有 commit 到 master 裡去。

使用 git diff 兩個檔案有什麼差別:

git diff
diff --git a/chapter3.txt b/chapter3.txt
index 33f4a2b..42b25f0 100644
--- a/chapter3.txt
+++ b/chapter3.txt
@@ -1 +1,3 @@
-Chapter 3
\ No newline at end of file
+Chapter 3
+
+333333333333333333333333333333333333333333333333
\ No newline at end of file

接著使用 git checkout 就可 roll back 到先前的版本了:

$ git checkout chapter3.txt
Updated 1 path from the index

接著,chapter3.txt 就回復到之前的版本了~


上一篇
[Day 21] [APIs] Mailchimp API - 這個章節終於要結束了!部署到 Heroku~
下一篇
[Day 23] [版控] GitHub 和 Remote repository
系列文
30 天線上自學前端72
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言