WebStorm中使用Git

在 WebStorm 中使用 Git,还有一些准备工作需要做一,那就是创建工作区,创建共享版本库,这个时候呢,我就把 GitHub 当作我远程的服务器,在 GitHub 上创建工作区,创建共享版本库,如下图进行创建。

首先进入 GitHub 官网:https://github.com/ 登录之后如下图点击下图中红框框的地方进入也有的仓库列表。

进入之后直接点击 new 即可完成创建我们的工作区,和共享版本库了。

下面是我在创建面板中输入的内容和勾选的内容,可以进行参考。

创建好了之后,项目经理就会在这个创建好的工作区中创建一个分支就是 develop 分支,首先项目经理需要把这个工作区下载下来然后创建一个分支然后提交到 GitHub 上就可以了,然后项目经理就可以通过两种方式来操作 GitHub 第一种方式就是通过账号和密码来进行下载然后提交,第二种方式就是通过 SSH 来进行下载和提交,在前面的文章中我已经介绍过了如何配置 SSH 我这里就用 SSH 的方式。

复制好了 SSH 地址之后,直接打开 Git 终端进行下载输入 git clone ssh地址, 即可进行克隆下载了。

然后就可以使用 WebStorm 来打开我们克隆下来的工作区,我这里因为电脑重置了 WebStorm 没有下载只有 IDEA 我就用 IDEA 打开了,都是同一家公司的产品都是一样的用法。

主要你的这个工作区是从 Git 服务器下载的那么通过 IDEA 打开,就可以使用 Git 来管理我们的这个项目了,只要这个项目被 Git 所管理了在 IDEA 的右上角就会多出如下图的这么几个图标。

在 WebStorm 的右下角就会多出一个 Git 他所在的分支名称。

在 WebStorm 的左下角会多出一个 Git Log 类似 version consol 的东西。

这样就代表着可以使用 Git 来进行管理项目了。

提交代码

右键项目会出现一个 Git 的选项,其中有一个 add,就是将当前的文件从工作区添加到暂缓区,commit 就是将暂缓区中的文件添加到 HEAD 指针指向的那个分支当中。

我们使用 WebStorm 打开项目之后会自动的生成一个 .idea 的文件夹,那么我们这个时候就可以使用忽略文件来进行忽略创建一个 .gitignore文件发现在创建的时候弹出了一个窗口如下,代表的意思是当前的这个文件是在工作区的是否需要添加到暂缓区。

创建完成之后在文件里面添加 .idea/ 代表忽略掉 .idea 的文件如下。

在没有添加的时候样式是这样的,如下。

在工作区中的文件颜色为红色。

将文件添加到暂缓区

右键项目选择 Git 然后选择 add 然后再写上本次编写的内容的说明就可以了,如下。

添加到暂缓区的文件颜色为绿色。

变成了绿色之后就可以 commit 了,一样的点击项目右键选择 Git 选项,然后选择 commit 填写备注,就可以将暂缓区中的文件添加到 HEAD 指针指向的分支当中去了。

创建分支

因为你需要知道当前所在的分支是那个那么如何查看就再 WebStorm 的右下角就可以进行查看,创建分支是基于当前所在的分支的内容进行创建的,创建分支直接点击 new branch 即可完成创建。

却换分支

点击 WebStorm 的右下角当前所在的分支名称即可出来一个分支列表,选择需要却换的分支然后点击 checkout 即可完成却换。

那么如何把创建好的分支推送到 Git 的远程服务器中呢,继续选择右键项目选择 Git 找到仓库的那一项,选择 push 即可再 Git 远程服务器完成创建了。

Git Flow 开发阶段

好了准备工作我们都已经准备好了现在就正式的进入开发阶段,基于 Develop 分支创建新特性分支,也就是开发的模板分支,接下来就使用我们之前准备好的环境好模拟一下 Git Flow 的流程吧,假如我现在要开发三个模板一个是首页,一个登录页,一个个人中心页,那么就开始吧,首先基于 Develop 分支创建首页的新特性分支就是 feature/home 分支如下,我们之前创建的时候没有勾选自动选择新创建好的分支选项这回我们把他勾选上。

接下来就基于 feature/home 分支进行开发首页相关的内容吧,这里就只是模拟开发,新建一些简单的文件再里面而已,再创建 index.html 的时候发现又弹出了那个之前的窗口,其实这个步骤 WebStorm 可以帮我们自动的完成,就是把新建的文件自动的从工作区当中添加到暂缓区中,这回我不需要每次新建文件的时候都弹出来了,我就把左下角的勾勾打上了,以后新建的文件都会自动的从工作区添加到暂缓区中了,如下。

开始开发首页的内容,我首先做的就是对首页的文件进行了初始化,初始了我 commit 了一下因为这一个小功能点,除了右键项目选择 Git 再选择 Commit 这种方式以外还可以直接点击 WebStorm 的右上角进行 commit

现在开始编写 css,和 html 文件的内容如下,代码就不给出来了,很简单自己看看就行,是个稍微学了点前端都看的懂。

那这个时候呢,我又开发完了一部分内容我紧接着又开始 commit 了,编写好本次编写的内容的备注然后进行 commit。

然后紧接着开始编写 js 代码,编写好了之后我也紧接着进行了提交,好了现在我们的首页就代表开发完成了。

现在开始来开发登录页面,却换到 Develop 分支基于 Develop 的内容来创建一个新特性 feature/login 分支,编写了内容都是和上面 feature/home 的内容差不多,下面的内容我就不在啰嗦就稍微快一点。

好了登陆页面开发完成了,继续基于 Develop 分支创建新特性分支 feature/me

到了这里我分配的三个任务都已经开发完成了,开发完了需要合并到 Develop 分支,那么怎么合并分支呢如下。

合并分支

首先需要却换到 Develop 分支基于 Develop 分支合并其他开发完成的分支内容,这个时候 Develop 什么都没有这个时候找到你的工作区点击右键找到 Git,在选项卡中有一个 Merge 这是最新版本的 WebStorm 老版本的是一个 Merge Branches 选项这里演示不了,我安装的是最新版本的,如下,选择了 Merge 会有一个列表代表着可以合并的分支,如下图。

全部合并了,不贴图,自行合并,最终的效果图如下。

你在合并的时候其实可以给出一些备注内容如下所示,我合并的时候没有发现最新版本有,我找到了,特意的贴在下面给你们进行参考如下。

查看开发历史

下面就是整个项目的开发历史,以及在不同分支中所干的事情,整个项目的走向是所编写的,以及什么时间编写的,那么这个时候 Git Flow 的开发阶段流程就已经走通了。

如上历史的含义就是基于 Develop 分支创建了一个 feature/home 分支做了两件事情,然后再却换到 Develop 分支创建了一个新特性 feature/login 分支做了三件事情,然后再却换到 Develop 分支基于 Develop 分支创建了一个新特性 feature/me 分支做了两件事情,然后却换到 Develop 分支把开发好的内容进行了统一的合并到了 Develop 分支,我少了一步那么就是合并分支的时候添加备注,因为我之前没有发现填写备注的地方,在上面的查看历史上面的图中可以进行田填写,不过不影响整体的流程的。

Git Flow 上线阶段

首先需要将开发阶段的代码同步到远程的服务器当中首先我先右键项目找到 Git 点击 push 推送到远程服务器当中。

这个时候需要做的事情就是基于 Develop 分支创建一个 Release/V1.0 分支,并且把 Release/V1.0 分支提交到远程服务器,然后测试人员再 Release/V1.0 分支下载代码开始测试,然后就是进入测试修复BUG,重新合并这类似的东西, 接下来开始基于 Develop 分支创建 Release/V1.0 分支。

创建好了之后把这个分支推送到远程的服务器当中,然后测试人员就去下载 Release 分支的内容进行测试,如果再测试阶段发现了 BUG 这个时候我们就要基于出现 BUG 的那个 Release 分支进行创建一个 bugfix 分支,那么这个时候假如出现了两个BUG我们就要基于 Release/V1.0 分支创建一个 bugfix/issue32 分支,这是第一个 BUG 的分支,这个是什么 BUG 呢,就是再登陆的时候没有进行安全校验,这个时候我们就在 bug/issue32 分支进行修复。

第一个 BUG 的 bigfix 分支创建好了给到对应的开发去进行修复,接下来继续创建第二个BUG的 bigfix 分支,基于 Release/V1.0 分支创建,bugfix/issue33 分支,如下。

这个 bigfix/issue33 的BUG问题是什么呢,就是在个人中心初始化的时候没有获取数据的问题,那么这个时候就找到个人中心进行修复。在真实的开发中是交给到对应的开发人员去进行修复的,接下来我就开始进行修复,如下图。

假如现在所有的BUG都修复完了,这个时候需要把这两个 bug/fix 分支的内容合并到 Release 分支当中,首先却换到 Release/V1.0 分支当中,基于 ReleaseV1.0 分支合并两个 bug/fix 分支如下图。

合并完成之后重新的把 Release/V1.0 分支的内容推送到远程服务器当中上面已经介绍过了,推送完成之后通知测试人员再次进行测试。

如果测试人员重新测试发现没有问题了,所有的BUG都已经修复了,这个时候在把 Release/V1.0 的代码合并到 Develop 分支当中, 却换到 Develop 分支合并 Release/V1.0 分支的内容,如下图。

然后重新推送一下 Develop 分支最新的内容到远程服务器当中,这个时候我们的上线阶段的准备工作已经准备好了。

这个时候就需要把 Develop 分支最终的代码合并到 master 分支当中,然后推送到远程服务器中。

项目上线,这个时候我们就要打一个 tag 那么如何在 WebStorm 中打 tag 呢,如下,右键项目选择 Git 可以看到有一个 new tag 的选项点击一下即可打一个 tag。

在把我们打的 tag 提交到远程服务器之前我们先来看看 GitHub 上的情况吧,在提交之前 Release 的哪里是没有内容的。

现在开始提交,如下。

提交之后再次查看 Git 远程服务器效果如下:

到了这,GitFlow 的上线阶段已经完成了。

上线之后阶段

上线之后你可以继续开发其他的功能,如果说上线之后发现了BUG,那么就要基于 master 分支创建 hotfix 分支,那么假如出现了一个首页没有清空数据缓存的BUG, 那么就要基于 master 分支创建一个 hotfix/issue66 分支,创建好了之后然后我就基于这个分支去修复BUG,如下,修复BUG的代码我随便写的,就是模拟一下。

修复完成之后呢,需要重新合并到 master 分支,重新同步到 Develop 分支上,首先我却换到 Develop 分支,然后合并 hotfix/issue66 BUG分支的代码。

然后把 Develop 分支最新的代码提交到 Git 远程服务器,push 完成之后还需要合并到 master 分支上,却换到 master 分支中然后合并 hotfix/issue66 分支的内容。

合并完成之后需要重新推送一下到远程服务器当中。

修复完成了BUG之后你的版本号是不是也需要改一下呢,所以这里需要进行重新打 tag。

创建好了新的 tag 之后需要重新同步到远程服务器。

推送完成之后,再次查看 GitHub 发现 Release 又新增了一个版本。

到了这里整个 GitFlow 的流程就走完了。

版本回退

去 Git 的提交历史中找到你想要回退的版本号,如下。

把我上图中的版本号复制出来,然后右键项目选择 Git 在选择 Reset HEAD 选择。

在弹出的对话框中输入你回退的版本号即可回退了。

更新最新代码

也就是把当前分支与远程服务器的这个分支的代码拉取一下,拉取到最新的内容(你在当前的分支编写了,而别人也在这个分支编写内容,那么这个时候别人提交了内容,那么你这个时候就可以把另外一个人编写的内容给拉取下来了,有可能你们两个改的是同一个文件,需要自行解决冲突),右键项目的选项中的 Git 中有 pull,WebStorm 的右上角也可以拉取。

posted @ 2021-01-03 23:28  BNTang  阅读(1972)  评论(0编辑  收藏  举报