web_07 | Web 前置知識——Git 和 GitHub：② 提交代碼+團隊合做

本文推薦 PC 端閱讀~

本文版權歸 「公衆號 | 前端一萬小時」 全部，未經受權，請勿轉載！
複製代碼

本知識點常見於「招聘要求」中——熟練使用 git。
複製代碼

---

前言： 在上一篇《Git 和 GitHub——① Git、GitHub 初認識》中，咱們明白了版本控制的重要性，也初步認知到了 Git、GitHub 會一直伴隨咱們的前端學習和工做之路。
上一篇中咱們學到了怎麼從 GitHub 上克隆一個已有的項目到本地倉庫。那麼與之相反的操做，若是咱們先建立了本地倉庫且項目進行中，那咱們再把這個倉庫遠程推送到 GitHub上 是否可行呢？
還有一個疑問，既然 Git 是新時代的分佈式版本控制系統，而 GitHub 又是一個經過 Git 進行版本控制的軟件源代碼託管服務平臺。那咱們一個團隊進行多人合做開發項目時，咱們又該如何操做呢？
如下，讓咱們動起手來，用兩個任務的形式一一解決。

---

1 建立本地倉庫，而後推送到遠程倉庫

• 任務：在咱們電腦本地建立一個文件用來保存即將開展的項目 test2，而後想辦法把這個本地文件相關的增刪改推送到 GitHub 的遠程倉庫上去。

1.1 第一步，準備

在 GitHub 上建立一個名叫 test2 的倉庫，相關操做查看《Git 和 GitHub——① Git、GitHub 初認識》。

• 註釋：咱們上一篇中這裏是勾選的，而本篇這個任務中，咱們新建的這個 test2 倉庫，咱們不勾選——由於正如它的英文提示同樣：咱們是想隨後推送一個咱們電腦本地已經創建好的倉庫到 GitHub 線上。

1.2 第二步，分析

點擊 Create repository 後，將會看到一些新提示：

• 註釋1：對於這個界面，咱們不要懼怕，它不是給咱們報錯，而是給咱們一些指導，讓咱們應該怎麼一步步操做。這裏的「註釋1」就是：讓咱們用下邊給你列出的命令行的方式在本地新建一個倉庫，而後一步步和遠程倉庫關聯。
• 註釋2：這裏就是叫咱們直接用命令行的方式推送一個咱們電腦本地已經存在的一個倉庫。

1.3 第三步，電腦本地新建 test2 項目

遵循第二步的官方提示，咱們在電腦本地新建 test2 項目。打開終端輸入命令：

mkdir test2
cd test2
複製代碼

1.4 第四步，初始化

將這個本地的 test2 文件夾初始化成一個本地的倉庫：

git init
複製代碼

• 註釋1：本地新建好 test 文件夾後，必定把路徑定位到這個文件夾上；
• 註釋2：定位在這個文件夾上後，咱們才能初始化這個文件夾，否則的話你將會初始化整個家目錄變成你的本地倉庫！init 是 initinal 的簡寫，初始化的意思。這個命令就是用來把一個本地文件夾初始化成一個本地倉庫的；
• 註釋3：這裏的 .git 就是檢驗本地文件夾和本地倉庫的最好標準。

1.5 第五步，在本地倉庫裏進行文件的增刪改查

touch README.md
echo "這是咱們的git進階測試倉庫" > README.md
複製代碼

• 註釋：這個是 Linux 的管道命令，把「這是咱們的 git 進階測試倉庫」字符串導入到 README.md 文件裏邊。

1.6 第六步，進行本地的提交

git add .
git commit -am "init"
複製代碼

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.8 第八步，完成測試

而後刷新你的 GitHub 界面，第二步中的界面將會變成如下界面，也意味着咱們任務圓滿完成：

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
複製代碼

更新本地合併時，會出現衝突。處理辦法是：

1. 修改取捨衝突文件；
2. 從新提交。

---

後記： 以上就是初學前端的咱們應該掌握的版本控制方面的知識和相關工具的運用，在後邊的具體 web 開發學習過程當中，咱們將會時時接觸到 Git、GitHub。
這篇文章的學完，咱們也就要正式開始咱們靜態頁面開發的學習——HTML、CSS，相應的知識點會不少很雜，但充滿樂趣，充滿挑戰。

祝好，qdywxs ♥ you！