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 的右上角也可以拉取。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM