iT邦幫忙

2025 iThome 鐵人賽

DAY 29
0
Vue.js

遊戲活動關卡查詢網站系列 第 29

遊戲活動關卡查詢網站Day29-文件整理(TortoiseGit)

  • 分享至 

  • xImage
  •  

目標
昨天講到
使用Netlify將Git上的檔案佈署的操作
實際上 網站從規劃到製作
最後到發佈到網路上 已經完成
這篇主要講的是一個工具TortoiseGit
藉由它檔案總管控管的功能
簡單介紹 文件比對、文件匯出的功能

步驟
1.
大家比較常稱呼它為小烏龜

以下簡單講解 安裝的方式


大部分PC應該都是WIN64的 這邊選擇紅框處下載
安裝過程就是下一步下一步就好

因為我們之前透過sourcetree的工具
加入了remote倉庫的Git網址
所以這邊tortoisegit也同步了設定
如果檔案未變更 最新的狀態就會呈現綠色打勾的圖示

首先是文件比對;
由於我們在上一篇已經把預設圖片修改了
但其實現在tortoisegit還停留在上一個版本的狀態
所以我們這時候 要做pull
把本地的版本號和遠端的同步
右鍵->選擇pull

然後右鍵->選擇show log
這邊看我們master上面的版本紀錄
右鍵點擊上個修改的程式 APP.vue
compare with base 這個是與上個版本內容比較
或者直接對檔案點擊兩下

下圖就是這兩個版本差異的地方
左邊是修改前 右邊是修改後
如果你常常搞混 那麼有一個簡單記憶方法
電視廣告上 瘦身前通常放左邊 瘦身後通常放右邊;
如果想要自定義左右邊的話
也可以按上面工具列左右邊箭頭圖案

不過其實它的顏色標示 比較淺
尤其是亮黃色 有時候造成資料比對困難
我們可以來到 檔案->Settings這邊自定義顏色
例如將較常比對的Add、Modifed、Removed
改成對人來說相對顯眼的紅色
會比較方便比對

上方有個搜索框框
它這個是預設全部搜索的
包括了標題、commit的訊息...等等
例如這邊 我們用「鐵人」來找到這個版本
所以 在commit訊息的時候 可以養成加入一些tag或關鍵字習慣
這樣之後用搜索的時候 可以加快搜索的速度
方便找到資料

再來是底下這邊的過濾工具
因為我們剛才有用「鐵人」關鍵字找出版本
但是可能這時 還有找特定檔案的需求
所以在下面紅框這裡 它是過濾path(路徑)用的
如下圖只會找到src/assets 下的圖片
當想縮小範圍查找檔案時 就能用這個方式

剛才介紹了文件比對和查找
接下來是文件的匯出
對要匯出的檔案右鍵->選擇export selection to..
就能將這個版本的檔案匯出到指定路徑
這個匯出的也包含了他們上一層的路徑


如果是想要比對兩個版本的差異
分別選取兩個版本
右鍵->選擇comare revisions

跳出的這個視窗
一樣可以個別點選需要的檔案
然後右鍵按匯出 export selection to...

有了匯出檔案的功能
有時候也有匯出路徑的需求
我們在右鍵->點選Copy to clipboard

大部分只會用到以下三種路徑 絕對、相對、純檔名
如下範例

//絕對路徑 full paths
C:\Users\jack1\tutorial\src\App.vue
C:\Users\jack1\tutorial\src\assets\Fairy\999999.png


//相對路徑 relative paths
src/App.vue
src/assets/Fairy/999999.png


// 純檔案名稱 file/foldernames
App.vue
999999.png

這篇我們將tortoisegit有的功能
文件比對、查找、檔案與路徑匯出
做了簡單的介紹
下一篇會將整個鐵人文做個總結

備註
其實我們之前用sourcetree上傳Github的功能
tortoisegit也能做到
文件比對的功能 GITHUB也都有
這邊主要是不借助使用指令
而是以圖像介面來方便的使用它
來達到文件比對的目的

但它在圖像化的呈現上 沒有sourcetree這麼方便
所以我會依照自己需求
決定要用哪一種工具 來做好版控


上一篇
遊戲活動關卡查詢網站Day28-上傳網站2(Netlify)
下一篇
遊戲活動關卡查詢網站Day30-回顧與總結
系列文
遊戲活動關卡查詢網站30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言