練習 - 使用 Git 進行變更並追蹤變更

1 分鐘

大多數的開發專案會反覆進行。您會撰寫一些程式碼，並接著測試程式碼以確定其正常運作。然後，您會撰寫更多程式碼，並邀請其他人參與程式碼。反覆進行表示會有許多變更：程式碼新增、Bug 修正、刪除和取代。

當您處理專案時，Git 有助於追蹤您所做的變更。這也可讓您復原錯誤。在接下來的練習中，您會繼續建立正在使用的網站，並了解一些重要的新命令，例如 git diff。

修改 index.html

網站的首頁 index.html 目前只包含一行 HTML。讓我們加以更新以執行更多動作，然後將變更認可至 Git。

在 Cloud Shell 的線上編輯器中重新開啟 index.html 檔案 (code index.html)，然後將檔案內容取代為下列 HTML：

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8'>
    <title>Our Feline Friends</title>
  </head>
  <body>
    <h1>Our Feline Friends</h1>
    <p>Eventually we will put cat pictures here.</p>
    <hr>
  </body>
</html>

儲存檔案並關閉線上編輯器。
使用 git diff 命令來查看已變更的內容：
```
git diff
```
輸出格式與 UNIX diff 命令相同，而且 Git 命令有許多相同的選項。加號會出現在已加入的行前面，而減號則表示已刪除的行。

預設值是讓 git diff 比較工作樹狀結構與索引。換句話說，其會顯示尚未暫存 (新增至 Git 索引) 的所有變更。若要比較工作樹狀結構與上一個認可，您可以使用 git diff HEAD。

如果命令在執行後未返回提示，請輸入 q 以結束差異檢視。
接下來，認可變更。如果 Git 在索引中已有檔案，您可以明確地指定要暫存和認可的檔案，而不是使用 -a 旗標 (commit 命令只會尋找檔案是否存在)。
```
git commit -m "Add HTML boilerplate to index.html" index.html
```
再次使用 git diff，將工作樹狀結構與索引進行比較：
```
git diff
```
這次，git diff 不會產生輸出，因為工作樹狀結構、索引與 HEAD 全部一致。
假設您決定「furry」音效比「feline」更方便。以「Furry」取代 index.html 中出現的兩個「Feline」。然後，儲存檔案。

如果您透過使用 code 命令使用內建程式碼編輯器，則不會看到任何異常。但是，如果您剛好使用其他編輯器 (包括稱為 sed 的編輯器)，則此編輯器可能會建立您不想要認可的 index.html.bak 檔案。 Vim 和 Emacs 等編輯器會建立名稱類似 index.html~ 和 index.html.~1~ 的備份檔案，視其設定方式而定。
使用下列命令，在內建程式碼編輯器中建立並開啟名為 .gitignore 的檔案：
```
code .gitignore
```
將下列幾行新增至檔案：
```
*.bak
*~
```
這一行會指示 Git 忽略檔案名稱結尾為 .bak 或 ~ 的檔案。

.gitignore 是 Git 世界中非常重要的檔案，因為這會防止將無關的檔案提交至版本控制。未定案 .gitignore 檔案適用於熱門的程式設計環境和語言。
儲存並關閉編輯器，然後使用下列命令認可變更：
```
git add -A
git commit -m "Make small wording change; ignore editor backups"
```
此範例會使用 -A 選項搭配 git add 新增所有未追蹤 (且未忽略) 的檔案，以及已變更為在 Git 控制下檔案的檔案。

如果您現在執行 git diff，輸出將會是空的，因為已認可變更。不過，您一律可以使用 git diff HEAD^ 命令來比較最新認可與先前認可之間的差異。試試看。別忘了在命令結尾加上插入號 ^ 字元。

新增子目錄

大部分網站都會使用 HTML 和 CSS 樣式表，而您所建立的網站也不例外。樣式表通常會儲存在子目錄中，因此，讓我們建立一個名為 CSS 的子目錄，並予以新增至存放庫。

首先，在專案目錄中建立名為 CSS 的子目錄：
```
mkdir CSS
```
然後執行 git status：
```
git status
```
為什麼 Git 回報沒有要認可的內容？

人們常常驚訝地發現，Git 不會將新增空白目錄視為變更。這是因為 Git 只會追蹤「檔案」的變更，而不會追蹤目錄的變更。

有時候，特別是在開發的初始階段中，您希望使用空白目錄作為預留位置。常見的慣例是在預留位置目錄中建立一個空白檔案，通常稱為 .git-keep。
使用下列命令在 CSS 子目錄中建立具有該名稱的空白檔案，並將子目錄的內容新增至索引：
```
touch CSS/.git-keep
git add CSS
```
再次使用 git status 來檢查存放庫的狀態。確認這回報有一個新檔案。

取代檔案

現在，讓我們以 CSS 檔案取代 .git-keep 並更新 index.html 來加以參考。

從 CSS 子目錄中刪除 .git-keep：
```
rm CSS/.git-keep
```
使用內建編輯器，在 CSS 子目錄中建立名為 site.css 的檔案：
```
cd CSS
code site.css
```

將下列 CSS 新增至檔案。接著，儲存並關閉檔案。

h1, h2, h3, h4, h5, h6 { font-family: sans-serif; }
body { font-family: serif; }

現在，將下面這一行新增至 index .html (別忘記回到 Cats 目錄) 中的 <title> 行之後，然後儲存修改後的檔案：
```
<link rel="stylesheet" href="CSS/site.css">
```
使用 git status 查看已變更之檔案的摘要。然後，使用下列命令將未追蹤的檔案暫存至版本控制，並認可您對 site.css 與 index.html 的變更：
```
git add .
git commit -m "Add a simple stylesheet"
```

與大部分 VCS 不同的是，Git 會記錄檔案的內容，而不是之間的差異 (變更)。這是 Git 中的分支之間可以快速地進行認可、分支和切換很重要的原因之一。其他 VCS 必須套用變更清單，才能在一個檔案版本與另一個版本之間取得。 Git 僅解壓縮其他版本。

列出認可

既然您已經記錄了合理數目的變更，您可以使用 git log 來查看這些。如同大部分的 Git 命令，有許多選項可供選擇。其中一個最有用的是 --oneline。

使用下列命令檢閱您所有的認可：
```
git log
```

檢查輸出。看起來應該如下列範例所示：

commit ae3f99c45db2547e59d8fcd8a6723e81bbc03b70
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 22:04:05 2019 +0000

    Add a simple stylesheet

commit 4d07803d7c706bb48c52fcf006ad50946a2a9503
Author: User Name <user-name@contoso.com>
Date:   Fri Nov 15 21:59:10 2019 +0000

    Make small wording change; ignore editor backups

...

現在，使用此命令取得更精確的清單：
```
git log --oneline
```

再次檢查輸出。這次，看起來應該如下列範例所示：

ae3f99c Add a simple stylesheet
4d07803 Make small wording change; ignore editor backups
f827c71 Add HTML boilerplate to index.html
45535f0 Add a heading to index.html
a69fe78 Create an empty index.html file

您可以了解為什麼一旦對專案進行數百次 (或數千次) 認可，--oneline 選項可能是您的最得力助手。另一個實用的選項是 -nX，其中 X 是認可編號：1 代表最新的認可，2 代表前一個認可，依此類推。若要自行查看，請嘗試 git log -n2 命令。

在使用 Git 的基本功能方面，我們已經有十足的進展。下一步：提升層次，了解如何使用 Git 從常見的錯誤中復原。

練習 - 使用 Git 進行變更並追蹤變更

修改 index.html

新增子目錄

取代檔案

列出認可

意見反應