iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 8
0
Modern Web

勇者Jason和前端之鑰系列 第 8

【DAY8】版本控制-git和它的GUI:Sourcetree(一)

  • 分享至 

  • xImage
  •  

首先,我們先上圖吧!
https://ithelp.ithome.com.tw/upload/images/20171227/20107705Bf1WLptZ0T.png

看到這個畫面是不是很懷念?
曾經在畢業影片製作的時候,不斷地輸出影片。
把資料夾裡面用的滿滿是影片,
一直排序,排序出只有自己懂的名稱。

而在我開始將element排到想要的位置時,
曾因為改動太多而忘了改了什麼,
因此也開始了新增第二個檔案的作法,
緊接著第三個、第四個......

眼看著檔案太多不是辦法,
深怕這些檔案會壓縮到男人的生存空間,
正好A同學出現「你會用git嗎?」
A同學總是在需要的時候出現,在不需要的時候隱藏身形。

而就在A同學出現的後兩天,有人到工作室講解git了。
我只能說:「我沒有聽懂啊!」
不過總是有了點概念,開始自己勤奮的上網看教學。

首先要先去下載git,google「git」即可找到git的官網。
下載好後按照流程安裝,會出現安裝成功。

然後,就沒有然後了。
什麼!!?

一開始的我覺得安裝後應該會出現一個git的程式給我按,
但是他什麼都沒有,就是安裝完成了,僅此而已。
因此我又重複安裝了兩次,然後尋求前輩的解惑。

原來要開command line啊!
原來git安裝完成是讓你的command line有git的指令可以呼叫。
(command line interface)
開啟了command line完全不會用,
崩潰!

因此我選擇了一個GUI:Sourcetree。
經過圖形化,使用者可以更方便的去操作。

開啟了Sourcetree,你一樣會被密密麻麻的功能給包圍。
已經很好懂了,按照前面講者的講解配上網路上的資源,
我成功的發了人生第一個commit。
但是我不知道原理,這讓我覺得不OK。
因此我又乖乖的回去跟著影片學command line的使用方法。
Youtube上的教學

我是跟著這位前輩學習git的基本知識。
了解Sourcetree到底幫我們省了什麼事,
然後再使用Source才不會不知道到底在幹嘛!
簡單介紹一下git,首先先上圖
https://ithelp.ithome.com.tw/upload/images/20171227/20107705q5IitWMC5M.jpg

首先看到workspace,
這邊是你的本機,此時使用git add可以將unstaged 的文件加入到staged的階段
在sourcetree上你只需要打個勾
https://ithelp.ithome.com.tw/upload/images/20171227/20107705tz9AjQLT7p.png

再來就是git commit了。
git commit可以讓妳的檔案被commit到妳的本地數據庫。
在sourcetree上你有三個步驟要做

https://ithelp.ithome.com.tw/upload/images/20171228/20107705oq8QdLseey.png

首先先按一下commit,然後在評論欄留下這次commit做了什麼事。
最後按下commit即可。

世界上沒有後悔的藥可以吃,
但是!
可以使用git reset來回到原本的版本

首先,我們先來確定是否commit了。
如果還沒commit,只是git add了,
那就給個git reset即可
在sourcetree上跟git add很像,
只是要把上面的打勾取消。(如圖上的index.html前的勾)

如果已經commit
要先更改head的位置(head像是一個指針,指著你現在所在的版本)
首先要學一個指令git reset —hard HEAD(回到最初版本)
git reset —hard HEAD^ (回到上一個版本)
git reset —hard HEAD^^ or git reset —hard HEAD~2(回到上兩個版本)

也有另外一種方法
git reset —hard 加入版本特有的id

https://ithelp.ithome.com.tw/upload/images/20171228/20107705LdoMYvkUte.png
這個我還沒用過!

如果想要回到過去看之前的版本,而不想要更動到現有的版本。
可以使用git checkout 加入版本特有的id -- 檔名
在sourcetree上,先選左邊的history標籤,
看到一條藍色的線上有許多節點,雙擊節點就會問你是否要checkout該點。
https://ithelp.ithome.com.tw/upload/images/20171228/20107705a2VYQtQYe4.png


上一篇
【DAY7】將想要顯示的區域定位到版面上(二)float
下一篇
【DAY9】版本控制-git和她的GUI:Sourcetree(二)
系列文
勇者Jason和前端之鑰32
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言