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)  编辑  收藏  举报  来源