本文推薦 PC 端閱讀
本文同步更新於：
- 「公眾號：前端一萬小時」
- 「知乎：Oli's 前端一萬小時」
- 「語雀：前端一萬小時」
複製程式碼
前言： 在上一篇《Git 和 GitHub——① Git、GitHub 初認識》中，我們明白了版本控制的重要性，也初步認知到了 Git、GitHub 會一直伴隨我們的前端學習和工作之路。 上一篇中我們學到了怎麼從 GitHub 上克隆一個已有的專案到本地倉庫。那麼與之相反的操作，如果我們先建立了本地倉庫且專案進行中，那我們再把這個倉庫遠端推送到 GitHub上 是否可行呢？ 還有一個疑問，既然 Git 是新時代的分散式版本控制系統，而 GitHub 又是一個通過 Git 進行版本控制的軟體原始碼託管服務平臺。那我們一個團隊進行多人合作開發專案時，我們又該如何操作呢？ 以下，讓我們動起手來，用兩個任務的形式一一解決。
1 建立本地倉庫，然後推送到遠端倉庫
- 任務：在我們電腦本地建立一個檔案用來儲存即將開展的專案 test2，然後想辦法把這個本地檔案相關的增刪改推送到 GitHub 的遠端倉庫上去。
1.1.1 第一步，準備
在 GitHub 上建立一個名叫 test2 的倉庫，相關操作檢視《Git 和 GitHub——① Git、GitHub 初認識》。
- 註釋：我們上一篇中這裡是勾選的，而本篇這個任務中，我們新建的這個 test2 倉庫，我們不勾選——因為正如它的英文提示一樣：我們是想隨後推送一個我們電腦本地已經建立好的倉庫到 GitHub 線上。
1.1.2 第二步，分析
點選 Create repository 後，將會看到一些新提示：
- 註釋1：對於這個介面，我們不要害怕，它不是給我們報錯，而是給我們一些指導，讓我們應該怎麼一步步操作。這裡的“註釋1”就是：讓我們用下邊給你列出的命令列的方式在本地新建一個倉庫，然後一步步和遠端倉庫關聯。
- 註釋2：這裡就是叫我們直接用命令列的方式推送一個我們電腦本地已經存在的一個倉庫。
1.1.3 第三步，電腦本地新建 test2 專案
遵循第二步的官方提示，我們在電腦本地新建 test2 專案。開啟終端輸入命令：
mkdir test2
cd test2
複製程式碼1.1.4 第四步，初始化
將這個本地的 test2 資料夾初始化成一個本地的倉庫：
git init
複製程式碼
- 註釋1：本地新建好 test 資料夾後，一定把路徑定位到這個資料夾上；
- 註釋2：定位在這個資料夾上後，我們才能初始化這個資料夾，不然的話你將會初始化整個家目錄變成你的本地倉庫！init 是 initinal 的簡寫，初始化的意思。這個命令就是用來把一個本地資料夾初始化成一個本地倉庫的；
- 註釋3：這裡的
.git就是檢驗本地資料夾和本地倉庫的最好標準。
1.1.5 第五步，在本地倉庫裡進行檔案的增刪改查
touch README.md
echo "這是我們的git進階測試倉庫" > README.md
複製程式碼
- 註釋：這個是 Linux 的管道命令，把“這是我們的 git 進階測試倉庫”字串匯入到 REMDME.md 檔案裡邊。
1.1.6 第六步，進行本地的提交
git add .
git commit -am "init"
複製程式碼1.1.7 第七步，建立聯絡
本來按照上一篇的知識，第六步過後我們就可以向遠端倉庫推送了。但是我們推送 push 給誰啊？雖然我們在第一步中就在 GitHub 上建立了 test2 空倉庫，但二者目前為止是一點關係都沒有的。所以，我們要先與 GitHub 遠端建立聯絡，告訴之前的空倉庫，我們要把本地倉庫推送到哪個地方。
git remote add original git@github.com:oli-zhao/test2.git
複製程式碼
- 註釋1：這個命令中，remote 是遠端的意思；add 是加的意思；original 是我們給 test2 遠端倉庫取得名字（你可以任意取）；後邊的
git@github.com:oli-zhao/test2.git是第二步中那個 GitHub 介面右上角給的 URL。——整個意思就是：我給我們遠端倉庫取了一個名字叫“original”，然後這個遠端倉庫的 URL 具體地址是git@github.com:oli-zhao/test2.git。 - 註釋2：這個命令就是把第六步中提交到本地庫的更改等推送到我們的名叫 original 的遠端倉庫。——這裡的 original 是什麼呢？就是
git@github.com:oli-zhao/test2.git，你可以直接把這個地址放上去，但由於長且很難記，所以我們給它加了一個標籤叫 original。
1.1.8 第八步，完成測試
然後重新整理你的 GitHub 介面，第二步中的介面將會變成以下介面，也意味著我們任務圓滿完成：
1.1.9 第九步，讓我們的專案可以線上上預覽
- 點選 Settings 後，在新開啟的介面往下拉，直到看到如下介面：
- 選擇 master branch 並 Save 後，將會看到如下介面：
- 開啟這個 URL 連結，我們的專案可以線上上預覽啦：
?總結： 任務圓滿完成，還附加了一個彩蛋。其實我們本地的倉庫，不止能推送到 GitHub 這個平臺上，還可以推送到其他支援 Git 的平臺上（新浪雲、coding 等），方法同理就是把這些平臺給你的 URL 放在第七步中放 URL 的位置。
還有兩個相關命令也可以練習：
1. 刪除我們給 URL 取的標籤名：
git remote remove 標籤名
2. 修改標籤對應的URL地址：
git remote set-url 需要修改url的標籤 新的url
3. 改標籤的名字：
git remote rename 當前名字 改後的名字
複製程式碼2 團隊合作利器——Branch
- 任務：初步認識分支是什麼，有什麼作用，大致知道該怎麼用。
2.1 分支是什麼？
比如說，我們現在開發一個專案，有3-5個工程師參加，然後在開發過程中：
-
有一個新的需求需要開發一個新功能，OK，讓 a 去開發。方法就是在當前 master 主分支上，拉一個 a 分支走，然後 a 就在 a 分支上開發；
-
專案主幹繼續推進；
-
突然又有一個新需求需要開發另一個新功能，OK，讓 b 去開發。方法也是在當前 master 主分支上，拉一個 b 分支走，然後 b 就在 b 分支上開發；
-
專案主幹繼續推進；
-
當 a 開發完成後，其實相對於主幹 master 分支來說：a 的分支上程式碼已經變老了，但 a 開發的功能卻是新的。那麼這個時候，a 只需要把他的程式碼合併到主幹分支上，那主幹 master 分支就既有了最新的程式碼，也有了 a 開發的新功能；
-
同理，當 b 開發完也做這樣的操作；
-
專案的最後，主幹分支 master 上將擁有最新的程式碼和滿足新增需求的新功能。
?總結： 以上就是分支的作用，如果沒有分支，那麼只有等到 a 開發完，b 才能開發，否則就會全亂套！
2.2 分支怎麼用？
在實際工作場景中，團隊協作最依賴的莫過於分支。而 Git 相比於 SVN 最強大的一個地方就是它擁有的強大的“分支”。
2.2.1 建立本地庫 develop 分支
git branch develop
複製程式碼2.2.2 切換到 develop 分支上
git checkout develop
複製程式碼2.2.3 在這個分支進行專案開發，並提交到本地倉庫分支上
touch a.md
git add .
git commit -am "a.md"
複製程式碼2.2.4 推送到遠端倉庫的 develop 分支上
git push original develop
複製程式碼2.2.5 把 develop 分支和主幹 master 分支合併
- 切換到 master 主幹分支：
git checkout master
複製程式碼- 把 develop 分支上的增刪改查的東西全部合併到 master ：
git merge develop
複製程式碼2.2.6 釋出上線
現在我在 GitHub 遠端倉庫上的程式碼還是我的 master 分支上的程式碼，只有一份程式碼。
複製程式碼2.2.7 推送到遠端倉庫：
git push original master
複製程式碼
- 註釋1：到這一步時，開啟 GitHub ，檢視 test2 是否增加了一個分支，且分支下有一個 a.md 檔案；
- 註釋2：這一步完成後，重新整理 GitHub ，檢視 test2 的 master 分支是否也多了一個 a.md 檔案，且 develop 分支和 master 包含的檔案是否一樣：
2.2.8 當遇到衝突時：
當自己和別人改同一個檔案的同一個地方後，我們再執行：
git pull
複製程式碼更新本地合併時，會出現衝突。處理辦法是：
- 修改取捨衝突檔案；
- 重新提交。
後記： 以上就是初學前端的我們應該掌握的版本控制方面的知識和相關工具的運用，在後邊的具體 web 開發學習過程中，我們將會時時接觸到 Git、GitHub 。 這篇文章的學完，我們也就要正式開始我們靜態頁面開發的學習——HTML、CSS，相應的知識點會很多很雜，但充滿樂趣，充滿挑戰。
（本文版權歸 “Oli's 前端一萬小時” 所有，未經授權，請勿轉載）