离不开的 Git和GitHub——②Git、GitHub 进阶

本知识学习用时：3小时，总第10/10000小时

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

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

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

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

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

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

第一步：在GitHub上创建一个名叫test2的仓库，相关操作查看《离不开的Git 和 GitHub——① 版本控制、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，相应的知识点会很多很杂，但充满乐趣，充满挑战。So,学无止境，前端值得你我用后边的10000小时来对待。

欢迎继续关注下文 ：

（1）HTML 基础

（本文版权归 “公号 | Oli的前端一万小时” 所有，转载需说明来源）