谁说用 Git 一定要用命令行?试试 SourceTree 吧
zhezhongyun 2025-03-24 01:27 18 浏览
作者:邵磊
来源:
https://juejin.im/post/59bc944d51882519777c5e07
前言
作为使用Sourcetree大于3年的我,已熟知git的每一个功能,并灵活运用利用git解决开发中各式各样的场景问题,我也曾多次在公司内部不同小组间分享Sourcetree使用经验,接下来给大家分享下这款工具吧。
本文可能是目前网上最全的一篇可视化使用git工具Sourcetree文章。
可能对于很多开发来说,只要搞懂git的push、pull、解决一些简单的冲突命令就好了,事实上git的功能十分强大,而通过背命令很难熟记每个逻辑。当然不同的ide开发环境都有各种各样的git插件,操作方法各不相同,不如直接学个跨平台,不受ide限制的git管理工具Sourcetree。不管你做java,还是python、Android都可以使用。
介绍
官方介绍如下:
A free Git client for Windows and MacSourcetree simplifies how you interact with your Git repositories so you can focus on coding. Visualize and manage your repositories through Sourcetree's simple Git GUI.
译文:
一款强大的Windows和Mac的免费Git客户端sourcetree简化你如何与你的Git存储库使您可以专注于编码。可视化和通过Sourcetree简单的git GUI管理你的知识库。
一点坑
下载www.sourcetreeapp.com/这款软件是免费的,但是需要注册,登录授权。
一些场景
我大概把一些git高阶的应用场景和大家分享下:
- 一个项目含开发分支、集成分支、集成分支(稳定版)、生产环境分支等
- 一个项目含base分支,按功能分配到各个分支,各个开发管理(十来个分支),集成分支、生产环境分支。(那十来个分支内只有自己模块的代码)
- 一款产品一个主分支,对于每个公司实施均有个性化需求,且需求很难以插件形式实施,或者插件形式也需要各种个性化修改的插件,则对于每个项目实施对应每个分支。
这里,我先简单描述这几种使用场景,具体内容,后面会逐步介绍。
欣赏下git分支:
常见用法
本文会综合Windows环境和mac环境一起讲,但在两个平台下界面或名词还是有少许差异,本文会尽可能的说明。
添加仓库
mac下从url克隆
git remote add orgin http://10.10.100.6:3000/sl/shaolei.git
windows下从url克隆
抓取、获取分支信息
抓取(mac下的名字)获取(Windows下的名字)指获取服务端git库的变更信息,比如落后几个版本,超前几个版本,我们平常多人协作的项目,提交代码前需要先获取一下,如果服务端有新的提交,再拉取下别人的更改,可以减少代码冲突。(菜单栏)
拉取代码
$ git fetch $ git merge orgin/master
我先将界面分为 菜单栏、左侧栏、文件栏、变更栏、底部栏以方便下文介绍。
直接点击菜单栏的拉取按钮即可将远程代码变更拉取到本地。
提交代码:
1.正常提交
- 首先将未暂存的文件选中,点击后面的暂存所选;或者直接点击暂存所有。(文件栏)
- 在下方文本框输入本次代码变动的说明。(底部栏)
- sourcetree默认不会推送到远程仓库,打勾立即推送变更到origin。(底部栏)
- 点提交即可(如果没有打勾立即推送变更到远程,还需手动点击菜单栏的推送)
这里我模拟一些变更,随便改点代码,然后保存,再次回到提交界面。
变更栏会包含本次所有变更,其中+代表本次增加行;-代表本次删除行;前面2个行号依次代码变更前行号,变更后的行号。
为了保证代码变更尽可能的少,我们需要丢弃一些无意义的变更,如153行的删了一行
需要注意的是,丢弃不等于删除,丢弃所丢的东西是那一行的变更,比如是+号,那么丢掉代表不增加这一行,减号-同理丢的是不删除这一行,也就是恢复这一行。
sourcetree会把所有的变更以区块来分组,所以如果是整个区块的变更都没有意义,可直接丢弃整个块,如图:
随后暂存所选提交(文件栏)
暂存代码
暂存和丢弃类似,是将代码片段暂存到本地暂存区 以备提交,提交时所提交的代码就是暂存区的代码。
当我们某个功能已经实现了,但是又想优化一下代码,可又担心等会没优化成功,此时的代码丢失,如果没有git之前,我们可能会备份一份代码,这里只需要暂存代码即可。暂存后,正常修改,后续的变更会出现在未暂存文件中的变更栏中。
此时无论是丢弃,还是继续暂存都是基于上次已暂存的文件。
当然,你也可以提交代码,来实现类似功能。
1.解决冲突
当我和别人改了相同文件的相同行时,(大部分我们多人改变了一个文件,git都会帮我们处理掉,自动合并,但是当改变同一文件的相同行时,在拉取时就会有冲突)如图
我们可以先将我们代码贮藏起来(菜单栏),然后再拉取代码,接着应用贮藏,应用后冲突的文件会显示出来
$ git stash
这个时候,我们需要指定一个版本,比如是别人的版本为准,还是我的版本,随后右键文件选择 解决冲突使用我的版本(左侧栏选择文件状态-》工作副本)
变更栏可以看到updated upstream 是别人改的版本,+====下面我改的版本。
如果远程和本地都有问题,建议打开ide工具编辑后提交。
新开分支
在项目中,我们可能分为开发分支、集成分支、生成环境分支等,这时我们只需要在某个节点上右键选择分支即可
推送分支
新开的分支不会在远程显示,所以需要将分支推送到远程。
$ git push orgin 测试分支
切换分支
$ git checkout 3e1e7fc
需要切换到不通分支时,直接双击分支。
拉取远程分支
和切换分支类似,双击远程分支即可。
回滚提交
有些时候,我们提交的代码有问题,需要回滚回去。
git revert *
回滚某次提交
将某次变更(在sourcetree里是某个节点)右键选择回滚提交。
回滚文件
回滚行
忽略文件
项目中,有一些文件夹是需要忽略,而不需要提交到仓库里,比如bin目录下、target目录下的文件。
这里支持忽略单个文件、忽略所有扩展名、或略文件夹下的一切等。之后,我们不会看到这些文件变动。
需要说明的是忽略文件,只能忽略未跟踪文件,如果已跟踪文件(之前被提交过),需要先将这些文件删除后,提交代码库,再次忽略文件。
合并分支
由图中可以看出,我们的测试分支代码落后master分支2个节点,我们可以在master分支上右键选择合并到当前分支
当有冲突时,需要和上文中介绍的那样解决冲突,然后提交;如果没有冲突,需要手动点击推送按钮将合并后的变更提交到远程
贮藏(暂存)代码
$ git stash
上文已有介绍,主要指暂存所有变更,以便于应用暂存(windows下叫贮藏)
审查文件
假设一个文件被不同的开发修改过,有段代码需要找到修改人,我们可以右键审查文件查看每一行的作者。
$ git blame
效果如下:
右键某一行选择查看详细日志 可以看到该次提交的说明。
查看文件变动历史
我们时常需要查看某个文件变动的历史,这里我们可以右键查看文件的 变更历史
$ git log
点击后效果如图:
按文件打开历史版本
有些时候,我们也需要查看文件的历史版本,这里可以选中节点后,选择那个变更文件,右键 打开历史版本
sourcetree会生成一个临时文件(历史版本),以供我们分析。
标签的使用
我们有些时候需要给一个变更增加一个标签,比如稳定版1.0的标签
git tag v1 $ git tag -d v1 //移除标签
效果如下:
存档
存档指将当前版本打包成一个zip包。
检出分支
检出分支意思是将当前项目回到选中的版本,这样我们可以很轻松回到任意一个版本,来编译项目,或者检查当时项目的问题。
其他
- 合并 一般是用于不通分支间,将某次提交的所有变更合并到当前分支。
- rebase、交互式变都是变基,主要是将远程的这个分支名里的标识改变,大部分场景用不到
- 重置到当前节点:这个功能蛮好用的,可以将目前的分支回滚到那一次的分支,然后将所有的文件变更显示出来,相当于回到当时准备提交的时候(包含之后的所有变动)。
- 遴选 从不同的分支中检出一个单独的commit , 并把它和你当前的分支合并,类似于打补丁,例如,修复一个所有分支都有的bug这样的场合可以适用。
$ git revert $ git cherry-pick 4a1fd5
- 分支的拉取推:从远程拉取
- 跟踪分支:当未跟踪时表示本地没有和远程建立分支的联系
- 重命名分支
- 删除分支等
如何查看界面上的操作对应命令
设置后可以看到每部操作的git命令
一些良好的习惯
- 尽可能丢弃一些无意义的变更
- 尽可能按模块分配开发人员任务
- 合并分支后需立刻解决掉冲突
- 减少单个文件内代码变动的区块
- 如果使用我的版本解决问题,需告知对方
场景 应用
篇幅有限,下次再续!
总结
通过本文介绍,可以解决平时90%以上的各个代码提交问题,至于用什么ide环境,那都不是事,使用ide开发工具打开sourcetree里的项目即可。
作者:邵磊
链接:
https://juejin.im/post/59bc944d51882519777c5e07
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关推荐
- JavaScript中常用数据类型,你知道几个?
-
本文首发自「慕课网」,想了解更多IT干货内容,程序员圈内热闻,欢迎关注!作者|慕课网精英讲师Lison这篇文章我们了解一下JavaScript中现有的八个数据类型,当然这并不是JavaScr...
- 踩坑:前端的z-index 之bug一二(zh1es前端)
-
IE6下浮动元素bug给IE6下的一个div设置元素样式,无论z-index设置多高都不起作用。这种情况发生的条件有三个:1.父标签position属性为relative;2.问题标签无posi...
- 两栏布局、左边定宽200px、右边自适应如何实现?
-
一、两栏布局(左定宽,右自动)1.float+margin即固定宽度元素设置float属性为left,自适应元素设置margin属性,margin-left应>=定宽元素宽度。举例:HTM...
- 前端代码需要这样优化才是一个标准的网站
-
网站由前端和后端组成,前端呈现给用户。本文将告诉您前端页面代码的优化,当然仍然是基于seo优化的。 就前端而言,如果做伪静态处理,基本上是普通的html代码,正常情况下,这些页面内容是通过页面模...
- 网页设计如何自学(初学网页设计)
-
1在Dreamweaver中搭建不同的页面,需要掌握HTML的语句了,通过调整各项数值就可以制作出排版漂亮的页面,跟着就可以学习一些可视化设计软件。下面介绍网页设计如何自学,希望可以帮助到各位。Dre...
- 1、数值类型(数值类型有)
-
1.1数据类型概览MySQL的数据类型可划分为三大类别:数值类型:旨在存储数字(涵盖整型、浮点型、DECIMAL等)。字符串类型:主要用于存储文本(诸如CHAR、VARCHAR之类)。日期/...
- 网页设计的布局属性(网页设计的布局属性是什么)
-
布局属性是网站设计中必不可少的一个重要的环节,主要用来设置网页的元素的布局,主要有以下属性。1、float:该属性设置元素的浮动方式,可以取none,left和right等3个值,分别表示不浮动,浮在...
- Grid网格布局一种更灵活、更强大的二维布局模型!
-
当涉及到网页布局时,display:flex;和display:grid;是两个常用的CSS属性,它们都允许创建不同类型的布局,但有着不同的用法和适用场景。使用flex布局的痛点当我们使...
- React 项目实践——创建一个聊天机器人
-
作者:FredrikStrandOseberg转发链接:https://www.freecodecamp.org/news/how-to-build-a-chatbot-with-react/前言...
- 有趣的 CSS 数学函数(css公式)
-
前言之前一直在玩three.js,接触了很多数学函数,用它们创造过很多特效。于是我思考:能否在CSS中也用上这些数学函数,但发现CSS目前还没有,据说以后的新规范会纳入,估计也要等很久。然...
- web开发之-前端css(5)(css前端设计)
-
显示控制一个元素的显示方式,我们可以使用display:block;display:inline-block;display:none;其中布局相关的还有两个很重要的属性:display:flex;和...
- 2024最新升级–前端内功修炼 5大主流布局系统进阶(分享)
-
获课:keyouit.xyz/14642/1.前端布局的重要性及发展历程前端布局是网页设计和开发的核心技能之一,它决定了页面元素如何组织和呈现。从早期的静态布局到现代的响应式布局,前端布局技术经历了...
- 教你轻松制作自动换行的CSS布局,轻松应对不同设备!
-
在网页设计中,自动换行的CSS布局是非常常见的需求,特别是在响应式设计中。它可以让网页内容自动适应不同屏幕尺寸,保证用户在不同设备上都能够获得良好的浏览体验。本文将介绍几种制作自动换行的CSS布局的方...
- 晨光微语!一道 CSS 面试题,伴你静享知识治愈时光
-
当第一缕阳光温柔地爬上窗台,窗外的鸟鸣声清脆悦耳,空气中弥漫着清新的气息。在这宁静美好的清晨与上午时光,泡一杯热气腾腾的咖啡,找一个舒适的角落坐下。前端的小伙伴们,先把工作的疲惫和面试的焦虑放在一边,...
- 2023 年的响应式设计指南(什么是响应式设计优缺点)
-
大家好,我是Echa。如今,当大家考虑构建流畅的布局时,没有再写固定宽度和高度数值了。相反,小编今天构建的布局需要适用于几乎任何尺寸的设备。是不是不可思议,小编仍然看到网站遵循自适应设计模式,其中它有...
- 一周热门
- 最近发表
- 标签列表
-
- HTML 教程 (33)
- HTML 简介 (35)
- HTML 实例/测验 (32)
- HTML 测验 (32)
- JavaScript 和 HTML DOM 参考手册 (32)
- HTML 拓展阅读 (30)
- HTML常用标签 (29)
- HTML文本框样式 (31)
- HTML滚动条样式 (34)
- HTML5 浏览器支持 (33)
- HTML5 新元素 (33)
- HTML5 WebSocket (30)
- HTML5 代码规范 (32)
- HTML5 标签 (717)
- HTML5 标签 (已废弃) (75)
- HTML5电子书 (32)
- HTML5开发工具 (34)
- HTML5小游戏源码 (34)
- HTML5模板下载 (30)
- HTTP 状态消息 (33)
- HTTP 方法:GET 对比 POST (33)
- 键盘快捷键 (35)
- 标签 (226)
- HTML button formtarget 属性 (30)
- CSS 水平对齐 (Horizontal Align) (30)