非常棒的可视化Git学习工具,实用技巧一网打尽!

前几天公司有人做git培训,讲的枯燥乏味,观众们都睡着了。这不由的让我想起一个非常棒的可视化git学习工具。有了这个工具,公司内的git培训师,可以下岗了。

本文将详细介绍这个工具,文末会给出工具地址。

Git已经是程序员的必备技能,但是它有门槛。很多时候,只掌握了pull、push、commit等指令,并不能解决问题,尤其是在有冲突的时候。

图片

根据你输入的git指令,这个过程,全部都是动画显示的。通过箭头的指向,你能很容易的看出git仓库的数据流,是如何变化的。

1. 提交相关

下图是提交了两次commit之后的动画。可以看到版本变了两次,而且是相同颜色的。

git commitgit commit
图片

下图是执行了新建分支的指令。通过指定b参数,可以在不存在这个分支的时候,自动创建。

git checkout -b bugFix
图片

下面创建了一个新的分支bugFix,分别在main和bugFix提交一次代码后,使用merge指令把bugfix合并到了main。

git checkout -b bugFixgit commit git checkout mastergit commit git merge bugFix
图片

rebase会让代码变的更加清晰。下图演示了rebase命令的用法。

git checkout -b bugFixgit commitgit checkout maingit commitgit checkout bugFixgit rebase main
图片

2. HEAD移动

HEAD 总是指向当前分支上最近一次提交记录。大多数修改提交树的 Git 命令都是从改变 HEAD 的指向开始的。

通过HEAD能够上下移动,很方便的功能。

下图演示了可以直接通过hash值指定HEAD的指向。通过checkout可以在任意时候漫游到任意的提交。

git checkout c4
图片

通过^~等特殊符号,可以完成相对跳转。不用再到处找那串非常长的hash值了。看图说话。

git checkout bugFixgit checkout HEAD^
图片

当然,你可以直接简化成

git checkout bugFix^

是不是很简单?

同样的,~这个符号,后面可以带数字,用来实现连级跳。我们看一下它的效果。

git branch -f bugFix HEAD~2 git branch -f main c6git checkout HEAD^
image.gif

reset和revert都是用来回退提交的。不过相对来说,reset是对于local的,revert是相对于remote的。

git reset c1git checkout pushedgit revert c2
图片

<figcaption style="margin: 5px 0px 0px; padding: 0px; max-width: 100%; box-sizing: border-box !important; word-wrap: break-word !important; text-align: center; color: rgb(136, 136, 136); font-size: 14px;">
</figcaption>

以上的功能,已经涵盖了90%的git操作。但是,如果你玩不转另外10%的话,在某些情况下会变得非常困扰。

3. cherry-pick

如果你想将一些提交复制到当前所在的位置(HEAD)下面的话, Cherry-pick 是最直接的方式了。我个人非常喜欢 cherry-pick,因为它特别简单。

它和git rebase不同的是,可以只选取其中的部分提交,抓取过来。

git cherry-pick c3 c4 c7
图片

另外,我们还可以使用交互式的rebase。比如,git rebase -i HEAD~n会打开对话框进行调整,在此不再重复。

交互式 rebase 指的是使用带参数--interactive的 rebase 命令, 简写为-i。

4. 几个技巧

学完上面这些,可以说在工作中应该游刃有余了。下面是几个常用的技巧。

图片

要完成上图的转换,只需要切换到main分支,然后执行git cherry-pick c4即可。

git checkout maingit cherry-pick c4

下面这个例子更麻烦一些。你之前在 newImage 分支上进行了一次提交,然后又基于它创建了 caption 分支,然后又提交了一次。此时你想对的某个以前的提交记录进行一些小小的调整。比如设计师想修改一下 newImage 中图片的分辨率,尽管那个提交记录并不是最新的了。

git rebase -i HEAD~2 #修改C2和C3的顺序git commit --amendgit rebase -i HEAD~2 #修改C3'和C2''顺序git branch -f master

git commit --amend 相当于上次提交错误的信息被覆盖了,gitk图形化界面上看不到上次提交的信息,git log上也看不到之前的信息,而add 后再commit 相当于重新加了一个信息。

图片

我们能够另外一种方式完成这个目标。可以利用 cherry-pick 可以将提交树上任何地方的提交记录取过来追加到 HEAD 上的特性。

git checkout maingit cherry-pick newImagegit commit --amendgit cherry-pick caption

使用git tag可以给记录打标签。

图片
git tag v0 c1git tag v1 c2git checkout c2

5. 高级技巧

有时候,你为了把提交记录整理成好看的提交顺序,需要下点力气。这在有些追求卓越的团队是存在的,但一般团队并不会这么折腾。

所以它才叫高级技巧。比如下面这张图的转变,我们需要经过多次rebase。

图片
git rebase main  bugFixgit rebase bugFix sidegit rebase side anothergit branch -f master another

通过~、^等特殊符号可以快速跳转,它们级连起来更加富有魅力。

图片
git branch bugWork HEAD~^2~

比如要完成上面的分支创建,我们只需要一条命令就可以。当然也可以直接用git brach bugWork c2

来个更复杂的例子。

图片
git checkout onegit cherry-pick c4 c3 c2git checkout twogit cherry-pick c5 c4 c3 c2git branch -f three c2

6. 远程仓库

clone命令是最基本的拷贝远端仓库的命令。要达到下图的目标,只需要简单执行git clone指令即可。

图片

通过下面的命令,可以看出远程仓库和本地仓库的HEAD分离状态。

git commitgit checkout o/mastergit commit
图片

下图演示了fetch指令的作用。git fetch并不会改变本地磁盘的文件,它只是同步了远程的数据,然后将远程分支的指针移动了一下。fetch只是下载动作。比如下面这张图的转换。

图片

git pull是git fetch和git merge的缩写。下图可以展示这个过程。

图片
git pull

下面是下面一关的答案,fakeTeamwork是这个教程自己造的命令。

git clonegit fakeTeamwork 2git commitgit pull

git push也是非常简单的命令,所以也不再介绍。

git commitgit commit git push

下面的关卡会越来越复杂,直接看截图效果比较差。这里直接给出答案,可以实际操作一下。

07. 偏离的提交历史

图片
git clonegit fakeTeamwork 1git commitgit pull --rebasegit push

08. 锁定的master

图片
git reset --hard o/maingit checkout -b feature C2git push origin feature

工具地址

https://learngitbranching.js.org/?locale=zh_CN

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,546评论 6 507
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,224评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,911评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,737评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,753评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,598评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,338评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,249评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,696评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,888评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 40,013评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,731评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,348评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,929评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,048评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,203评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,960评论 2 355

推荐阅读更多精彩内容