离不开的Git和GitHub（2）——Git、GitHub进阶（提交代码＋团队合作

本知识学习用时：2小时，总第9/10000小时

前言：在《离不开的Git和GitHub（1）——版本控制、Git、GitHub初认识 》中，我们明白了版本控制的重要性，也初步认知到了Git、GitHub会一直伴随我们的前端学习和工作之路。

上一篇中我们学到了怎么从GitHub上克隆一个已有的项目到本地仓库。那么与之相反的操作，如果我们先创建了本地仓库且项目进行中，那我们再把这个仓库远程推送到GitHub上是否可行呢？

还有一个疑问，既然Git是新时代的分布式版本控制系统，而GitHub又是一个通过Git进行版本控制的软件源代码托管服务平台。那我们一个团队进行多人合作开发项目时，我们又该如何操作呢？

以下，让我们动起手来，用两个任务的形式一一解决。

一、创建本地仓库，然后推送到远程仓库

任务：在我们电脑本地创建一个文件用来保存即将开展的项目test2，然后想办法把这个本地文件相关的增删改推送到GitHub的远程仓库上去。

第一步：在GitHub上创建一个名叫test2的仓库，相关操作查看《离不开的Git和GitHub（1）——版本控制、Git、GitHub初认识》

-- 注释：我们上一篇中这里是勾选的，而这里这个任务中，我们新建的这个test2仓库，我们不勾选——因为正如它的英文提示一样：我们是想随后推送一个我们电脑本地已经建立好的仓库到GitHub线上。

第二步：点击Create repository 后，将会看到一些新提示：

-- 注释1:对于这个界面，我们不要害怕，它不是给我们报错，而是给我们一些指导，让我们应该怎么一步步操作。这里的注释1就是：让我们用下边给你列出的命令行的方式在本地新建一个仓库，然后一步步和远程仓库关联。

-- 注释2:这里就是叫我们直接用命令行的方式推送一个我们电脑本地已经存在的一个仓库。

第三步：遵循第二步的官方提示，我们在电脑本地新建test2项目。打开终端输入命令：

第四步：将这个本地的test2文件夹初始化成一个本地的仓库：

-- 注释1:本地新建好test文件夹后，一定把路径定位到这个文件夹上；

-- 注释2:定位在这个文件夹上后，我们才能初始化这个文件夹，不然的话你将会初始化整个家目录变成你的本地仓库！init是initinal的简写，初始化的意思。这个命令就是用来把一个本地文件夹初始化成一个本地仓库的；

-- 注释3:这里的.git就是检验本地文件夹和本地仓库的最好标准。

第五步：在本地仓库里进行文件的增删改查：

-- 注释：这个是Linux的管道命令，把“这是我们的git进阶测试仓库“字符串导入到REMDME.md文件里边。

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

第七步：本来按照上一篇的知识，第六步过后我们就可以向远程仓库推送了。但是我们推送push给谁啊？虽然我们在第一步中就在GitHub上建立了test2空仓库，但二者目前为止是一点关系都没有的。所以，我们要先与GitHub远程建立联系，告诉之前的空仓库，我们要把本地仓库推送到哪个地方。

-- 注释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的位置。

还有两个相关命令也可以练习：

二、团队合作利器——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分支：

2.切换到develop分支上：

3.在这个分支进行项目开发,并提交到本地仓库分支上：

4.推送到远程仓库的develop分支上：

5.把develop分支和主干master分支合并：

-- 切换到master主干分支：

-- 把develop分支上的真删改查的东西全部合并到master:

6.发布上线：

7.推送到远程仓库：

-- 注释1:到这一步时，打开GitHub，查看test2 是否增加了一个分支，且分支下有一个a.md文件；

-- 注释2:这一步完成后，刷新GitHub，查看test2的master分支是否也多了一个a.md文件，且develop分支和master包含的文件是否一样：

当遇到冲突时：

当自己和别人改同一个文件的同一个地方后，我们在执行：

更新本地合并时，会出现冲突。处理办法是：

-- 1.修改取舍冲突文件；

-- 2.重新提交。

后记：以上就是初学前端的我们应该掌握的版本控制方面的知识和相关工具的运用，在后边的具体web开发学习过程中，我们将会时时接触到Git、GitHub。那这篇文章的学完，我们也就要正式开始我们静态页面开发的学习——HTML、CSS，相应的知识点会很多很杂，但《Oli-Zhao的前端一万小时》，会以一个真实互联网创业公司的方方面面大小项目来学习这些杂乱的知识点。充满乐趣，充满挑战。so,学无止境，前端值得你我用后边的10000小时来对待。

欢迎继续关注下文 ：

从一个个静态页面开始学习HTML、CSS（0）——一个创业失败者会怎样重新设计他的那一个个项目网页

（本文版权归前端一万小时所有，转载需说明来源）