《Oli-Zhao的前端一萬小時》之：離不開的Git和GitHub（2）——Git、GitHub進階（提交代碼+團隊合作）

02-19

本知識學慣用時：2小時，總第9/10000小時

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

一、創建本地倉庫，然後推送到遠程倉庫

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

第一步：在GitHub上創建一個名叫test2的倉庫，相關操作查看《Oli-Zhao的前端一萬小時》之：離不開的Git和GitHub（1）——版本控制、Git、GitHub初認識

-- 注釋：我們上一篇中這裡是勾選的，而這裡這個任務中，我們新建的這個test2倉庫，我們不勾選——因為正如它的英文提示一樣：我們是想隨後推送一個我們電腦本地已經建立好的倉庫到GitHub線上。

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

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

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

mkdir test2cd test2

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

git init

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

第五步：在本地倉庫里進行文件的增刪改查：

touch README.mdecho "這是我們的git進階測試倉庫" > README.md

-- 注釋：這個是Linux的管道命令，把「這是我們的git進階測試倉庫「字元串導入到REMDME.md文件裡邊。

第六步：進行本地的提交：

git add .git commit -am "init"

第七步：本來按照上一篇的知識，第六步過後我們就可以向遠程倉庫推送了。但是我們推送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。

第八步：然後刷新你的GitHub界面，第二步中的界面將會變成以下界面，也意味著我們任務圓滿完成：

第九步：讓我們的項目可以在線上預覽：

-- 點擊Settings後，在新打開的界面往下拉，直到看到如下界面：

-- 選擇master branch 並 Save後，將會看到如下界面：

-- 打開這個URL鏈接，我們的項目可以在線上預覽啦。

總結：任務圓滿完成，還附加了一個彩蛋。其實我們本地的倉庫，不止能推送到GitHub這個平台上，還可以推送到其他支持Git的平台上（新浪雲、coding等），那方法同理就是把這些平台給你的URL放在第七步中放URL的位置。

還有兩個相關命令也可以練習：

1.刪除我們給URL取的標籤名：git remote remove 標籤名2.修改標籤對應的URL地址：git remote set-url 需要修改url的標籤新的url3.改標籤的名字：git remote rename 當前名字改後的名字

二、團隊合作利器——Branch

任務：初步認識分支是什麼，有什麼作用，大致知道該怎麼用。我們後續的HTML、CSS等等前端知識的學習，我都會用開源項目的形式把這個分支拿出來我們一起操作。

分支是什麼？

比如說，我們現在開發一個項目，有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才能開發,否則就會全亂套。

分支怎麼用？

在實際工作場景中，團隊協作最依賴的莫過於分支。而Git相比於SVN最強大的一個地方就是她擁有的強大的「分支」。

1.創建本地庫develop分支：

git branch develop

2.切換到develop分支上：

git checkout develop

3.在這個分支進行項目開發,並提交到本地倉庫分支上：

touch a.mdgit add .git commit -am "a.md"

4.推送到遠程倉庫的develop分支上：

git push original develop

5.把develop分支和主幹master分支合併：

-- 切換到master主幹分支：

git checkout master

-- 把develop分支上的真刪改查的東西全部合併到master:

git merge develop

6.發布上線：

現在我在GitHub遠程倉庫上的代碼還是我的master分支上的代碼，只有一份代碼。

7.推送到遠程倉庫：

git push original master

-- 注釋1:到這一步時，打開GitHub，查看test2 是否增加了一個分支，且分支下有一個a.md文件；
-- 注釋2:這一步完成後，刷新GitHub，查看test2的master分支是否也多了一個a.md文件，且develop分支和master包含的文件是否一樣：

當遇到衝突時：

當自己和別人改同一個文件的同一個地方後，我們在執行：

git pull

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

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

後記：以上就是初學前端的我們應該掌握的版本控制方面的知識和相關工具的運用，在後邊的具體web開發學習過程中，我們將會時時接觸到Git、GitHub。那這篇文章的學完，我們也就要正式開始我們靜態頁面開發的學習——HTML、CSS，相應的知識點會很多很雜，但《Oli-Zhao的前端一萬小時》，會以一個真實互聯網創業公司的方方面面大小項目來學習這些雜亂的知識點。充滿樂趣，充滿挑戰。so,學無止境，前端值得你我用後邊的10000小時來對待。

歡迎繼續關注下文：

《Oli-Zhao的前端一萬小時》之：從一個個靜態頁面開始學習HTML、CSS（0）——一個創業失敗者會怎樣重新設計他的那一個個項目網頁

（本文版權歸Oliver所有，轉載需說明來源）