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！