Git 命令使用(基础篇)

0. 前言

熟悉 Git 的常用命令,以下将以 Visual Studio Code 作为编辑器、Gitee 作为远程仓库介绍相关使用。

Git 的意义在于控制多版本的代码以及更好的团队协作。

Reading && More References:

  1. Git 官方教程:git-scm.com/book/zh/v2

  2. 如何在 Visual Studio Code 中使用 Git:code.visualstudio.com/Docs/editor…

  3. 如何在 WebStorm 中使用 Git:www.jetbrains.com/help/idea/u…


1. 代码克隆(至本地仓库) git clone <git address>

复制代码仓库地址(gitee.com/hp-chenpc/f…),找到你存放本地代码仓库的文件夹,右击点选 Git Bash Here。

Untitled.png

进入 Bash 终端界面,使用以下命令克隆线上代码至本地仓库

git clone https://gitee.com/hp-chenpc/frontend_practice.git

Untitled 1.png

注意:如果无法执行克隆,请保证在初次使用 git 前,设置相关配置,具体可参阅:


2. 查看(本地仓库的)现有分支 git branch

将源码文件夹拖进 vs code,打开终端(Ctrl + ~),可以看到本地仓库默认位于 master 分支:

Untitled 2.png

也可以通过命令 git branch 查看本地现有分支,目前仅有 master 一个分支。

通过颜色可知,当前处于 master 分支。

git branch

Untitled 3.png

3. 新建分支 git branch <branch name>

一般来讲,正常开发中绝不允许直接在 master 上直接修改代码,我们需要根据具体任务在本地新建分支。例如,我现在要添加 Vue 脚手架初始化项目,那么新的分支的名字可以根据【任务类型-任务内容-任务执行人】的形式起为:update-init_project-cpc。

注意:新建的分支需要基于现有分支进行创建,可以理解为造房子需要有一个地基,也可以理解为 JavaScript 中创建一个新的对象实例的前提是要有一个构造函数,是的,它需要有一个地基。

初始化项目的新分支暂时基于 master 分支进行创建,键入以下命令:

git branch update-init_project-cpc

之后,通过 git branch 命令可以看到,本地代码仓库中确实有这个分支。

Untitled 4.png

4. 切换分支 git checkout <branch name>

虽然我们创建了新的本地分支,但目前所在的分支并非是它。

需要使用以下命令切换分支:

git checkout update-init_project-cpc

之后,通过 git branch 命令可以看到,当前分支已切换成功。

Untitled 5.png

注意:新建分支并切换到新的分支的命令可以合并为 git checkout -b <branch name>

git checkout -b update-init_project-cpc
# 等价于下面两条命令:
# git branch update-init_project-cpc
# git checkout update-init_project-cpc

5. 查看(文件的)状态报告 git status

当分支上的文件发生改变时 (这里我初始化了 Vue 脚手架,具体细节略。),vs code 内置的 git 功能会监测这些文件变化。

输入以下命令查看状态报告:

git status

Untitled 6.png

注意:

  • 在提交(commit)代码之前,我们需要将发生变化的文件(staged changes)存入一个位置——暂存区
  • 暂存区的意义在于,它会追踪变化。
    • 当你提交代码时,存在暂存区的文件(就是被追踪的文件)将会被提交上去;
    • 而不在暂存区的(肯定是有变化的)文件,没有被追踪,因此不会被提交上去。
    • 所以,当你将当前分支的代码与上游分支合并,却发现上游分支的代码某些功能缺失时,你就要想到是不是有文件没有被提交到暂存区。

6. 追踪新文件(放入暂存区) git add <file name>

一般来说,一个大的功能点将会被拆分为些许小的功能点,每开发完一个小的功能点后,都会提交一次代码,在提交之前,需要将改动的文件添加至暂存区,然后再提交。

git add .

git add 后面我只写了一个点,表示将当前文件夹下所有的改动文件(不管是未被追踪的,还是被追踪的。)全部添加至暂存区。 Untitled 7.png

接着再看一次文件状态,git status。 Untitled 8.png 所有改动的文件已被放进暂存区。

注意:如果想要指定文件,例如,我只想将 README.md 文件添加进暂存区,那么输入以下命令即可:

git add README.md

Untitled 9.png

7. 提交更新记录 git commit -m 'some commit logs'

提交暂存区内所有文件,更新本地仓库,从而确保从本地仓库向远程仓库推送的代码是最新的。

git commit -m 'init project'

Untitled 10.png

每次提交都会生成一个提交记录的 id 值,这个是有意义的,感兴趣的可以去查找资料。


8. 推送分支(至远程仓库) git push origin <branch name> / git push

现在可以将这批代码推送至远程仓库了。

git push origin update-init_project-cpc

Untitled 11.png

注意:到这里,可能会有疑惑,一般不是 git push 就好了么?

原因在于:update-init_project-cpc 这个分支并没有在远程仓库,因此需要将推送命令写完整才行。

之后,远程仓库也有这个分支以后,便可直接 git push。


9. 拉取(远程仓库的)分支 git pull

以上,我们完成了代码克隆、新建分支、切换分支、文件追踪(暂存)、提交更新记录、分支推送,现在可以说是完成了 60% 的任务了,剩下 40% 要做的事是更新远程仓库的主分支 master

分为四步:

第一步,从 update-init_project-cpc 分支切换至 master 分支 (注意都是本地仓库);

git checkout master

Untitled 12.png

第二步,master 分支拉取远程仓库,确保本地的 master 分支与远程仓库中的 master 文件状态保持一致

git pull

Untitled 13.png

注意:这里看似多了一步,实际上在真实开发过程中,远程仓库的 master 分支可能与我们最开始的不一样了,有更新,因此这一步是有必要的!


10. 合并分支 git merge <branch name>

第三步,将 update-init_project-cpc 分支上的代码合并进 master 分支。

注意,此时我们位于 master 分支,要合并谁,branch name(分支名) 就写谁,这里是 update-init_project-cpc。

git merge update-init_project-cpc

11. 查看未暂存的修改 git diff

Untitled 14.png

一般情况下,可以正常合并。

但这里出现了一个错误,提示我们有一个文件(.gitignore)没有被提交。

原因是 vs code 发现 master 分支上的 .gitignore 文件可以做一些更好的修改,于是我遵循它的建议作了修改,但此时并未提交这些修改

还记得吗?可以通过 git status 来查看本地仓库的文件状态:

git status

Untitled 15.png

如果 git status 命令的输出对于你来说过于简略,而你想知道具体修改了什么地方,可以用 git diff 命令。—— git-scm.com/book/zh/v2/…

git diff

git diff 命令可以看到文件修改的具体细节,而不仅仅是文件的名字。 Untitled 16.png

接下来,文件添加追踪,放进暂存区,并提交更新。

git add .gitignore && git commit -m 'update .gitignore'

Untitled 17.png

注意:上面的命令是连写方式,也可以像下面这样分开写:

git add .gitignore
git commit -m 'update .gitignore'
# 上面两条可合并为一条:
# git add .gitignore && git commit -m 'update .gitignore'

当然,还需要推送到远程仓库才行。

git push

Untitled 18.png

最后,重新进行代码合并。

git merge update-init_project-cpc

Untitled 19.png

又出错了!自动合并时,提示 .gitignore 文件存在冲突。


12. 解决分支冲突

Untitled 20.png

如上图所示,在 vs code 中,如果出现分支冲突,那么在这个发生冲突的文件中,绿色代表当前分支 (此时是 master 分支) 的内容,蓝色表示外来分支 (此时是 update-init_project-cpc 分支) 的内容。

根据实际情况,这里应该选择外来分支的内容,点击绿色范围上方的第二个选项:Accept Incoming Change

Untitled 21.png

这样,就解决了分支冲突。

注意:实际工作中,遇到的冲突可能远比这个复杂,有必要的情况下,请和团队成员确认合并结果,以免合并出错,造成代码丢失等问题。

接下来,重新添加文件放进暂存区、提交并推送。

git add .gitignore && git commit -m 'fix conflicts in .gitignore && git push'

Untitled 22.png

好像推送成功了,但是又没有成功。

因为我把 && git push 命令写进了提交记录的字符串中,本来要写的是:

git add .gitignore && git commit -m 'fix conflicts in .gitignore' && git push

现在,已经提交了记录了,该怎么办?

重新修正提交信息即可。

13. 查看分支提交历史 git log

在修正提交信息之前,我们需要看一下提交历史,确认上一次的提交信息是否写错。

那么如何查看提交历史呢?

git log

Untitled 23.png

我们可以看到最近一条提交记录的提交信息被误写成:fix conflicts in .gitignore && git push。

14. 修正上一次的提交 git commit —amend

有时候我们提交完了才发现漏掉了几个文件没有添加,或者提交信息写错了。 此时,可以运行带有 --amend 选项的提交命令来重新提交。——git-scm.com/book/zh/v2/…

git commit --amend

输入后,出现以下界面,第一行就是刚刚的提交信息: Untitled 24.png

此时,按下 i 键进入 insert 模式Untitled 25.png

移动光标,修改第一行的提交信息: Untitled 26.png

完成后,按下 Esc 键,退出 insert 模式,底部的”插入“字样消失。 Untitled 27.png

此时,直接键入 Linux 命令 —— :wq ,保存编辑并退出。出现以下界面说明修改成功: Untitled 28.png

这时再次使用 git log 查看提交历史。 Untitled 29.png 没有问题。

终于,正式来到最终章——将合并好的 master 分支推送至远程仓库(git push),并使用 git status 再次查看文件状态:本地仓库的分支已更新到远程仓库,也确实没有东西提交了,本地和远程仓库的内容保持一致。

Untitled 30.png

至此,完成了初始化 Vue 脚手架的任务(相关分支:update-init_project-cpc)。

15. Summary

如果你边读边做,我相信你应该会掌握以下技能:

  1. 将一个远程仓库克隆到本地
  2. 在本地新建分支
  3. 切换(检出)分支
  4. 追踪文件,放进暂存区
  5. 提交更新
  6. 推送分支

除此之外,还包括分支合并、分支冲突的解决、提交信息的修改等内容。

结束了么?并没有~ 未完待续……

添加我的微信:enjoy_Mr_cat,共同成长,卷卷群里等你 🤪。

以上,感谢您的阅读。

posted @ 2022-04-10 21:30  见嘉于世  阅读(0)  评论(0编辑  收藏  举报  来源