(06)Git 和 GitHub:② 提交代码 + 团队合作 | Web 前置知识

2,537 阅读8分钟
原创:itsOli  @前端一万小时

本文首发于公众号前端一万小时

本文版权归作者所有,未经授权,请勿转载!

本文节选自“语雀”私有付费专栏前端一万小时 | 从零基础到轻松就业

❗️❗️❗️
以下链接为本文最新勘误篇章——《Git 和 GitHub:② 提交代码 + 团队合作》


本知识点常见于“招聘要求”中——熟练使用 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 分支

(❗️ develop 是你给“分支”取的名字,可以任意取~)

git branch develop

2.2.2 ※把本地库“develop 分支”推送到远程仓库的“develop 分支”上

git push original develop:develop

❗️这一步相当于做了一个“备份”,可以直接在本地切换,不用去远程仓库看了。

2.2.3 切换到 develop 分支上

git checkout develop

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

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

2.2.5 推送到远程仓库的 develop 分支上

git push original develop

2.2.6 把 develop 分支和主干 master 分支合并

  • 切换到 master 主干分支:
git checkout master
  • 把 develop 分支上的增删改查的东西全部合并到 master:
git merge develop

2.2.7 发布上线

现在我在 GitHub 远程仓库上的代码还是我的 master 分支上的代码,只有一份代码。

2.2.8 推送到远程仓库

git push original master

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

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

2.2.9 当遇到冲突时

当自己和别人改同一个文件的同一个地方后,我们再执行:

git pull

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

  1. 修改取舍冲突文件;

  2. 重新提交。



后记: 以上就是初学前端的我们应该掌握的版本控制方面的知识和相关工具的运用,在后边的具体 Web 开发学习过程中,我们将会时时接触到 Git、GitHub。

这篇文章的学完,我们也就要正式开始我们静态页面开发的学习——HTML、CSS,相应的知识点会很多很杂,但充满乐趣,充满挑战。

祝好,qdywxs ♥ you!