Git 教學 + Gif 操作動畫 [下載]

Git 介紹 台北市立大學 資訊科學系 碩一

林彥廷

投影片大綱• 胡言亂語• Git 用途• Git 介紹• Git 用法• Git 實務• 常見問題• Git 延伸• 參考文獻

胡言亂語我是唯一一個逃出來向你報信的人

<< 聖經 約伯紀 >>

前言在了解 Git 之前，其實你已經會用版本控制了 !

那些年，我們數不盡的存檔 / 讀檔。

覺得不滿意可以回朔存檔，讀檔重來。終章第 N章第二章第一章

主線支線 隱藏關卡 完美結局

支線主線 魔王前存檔 結局

去中心化 版本的彙整 以及 解決衝突• 大專案一定是很多人一起開發不同的部分• 大家各自的版本最終可以合併成一個正式的版本• 沒有衝突的地方就合併• 有衝突的部分 手動修改 提交為正式的版本 ( 有點像在排課表 )• 好像遊戲裡面 同時有單機的存檔，跟全球網路連線的公開存檔• 大家可以自己維護自己的遊戲紀錄、或者跟全球一起更新記錄

人類世界的正式版本圖片來源每個版本都有對應的1. 名字2. 時間3. 內容

其實 Git 核心理念講完了 然而魔鬼出現在細節

“However the devil is in the detail.”

Master

Senior

Junior

Beginner

十分鐘看工程師的一生

今天的報告在這裡 Bottom Up

Top Down ?

• Filter Input, and Escape Output • URL Mapping / Routing • Controller: HTTP Method, MIME Type, Restful API, RPC,

• Web Template Engine• View: Haml, Jade, Jinja, Twig, PHP, ASP.NET, Django …

• Database access, mapping, and configuration• Model: ORM, ODBC, PDO, Knex.js …

• Authentication and Authorization• Web Cache; Session; Logging; Scaffolding; Toolkits …

第一次寫 Full Web Framework 就上手

第一次發現 Full Web Framework 寫不完• 專案太大了 ( 參考 : 分層與封裝 )• 記住 Bottom Up 的開發哲學• 所以從輕量級的框架 (Micro Framework) 開始研究吧• Python: Django -> Bottle• PHP: Laravel -> Slim• Node: Meteor -> Express

• 遇到問題比較好修• 永遠不會知道五年後的需求跟設計理念是什麼•才剛學 XXX ， XXX 就沒人在用了。 (XXX 自行代入 jQuery,

React …)

善用工具•套件控制 : Node / npm, Python / pip, PHP / PEAR / PECL / Composer• 版本控制 : Git, SVN, CVS, InVision, Avocode•協作工具 : Trello, Slack, HipChat, HackPad, Google Doc• 多媒體工具 : ffmpeg, gifsicle, libav• 自動化 : Selenium, xxx bot, Automator, Sikuli•腳本與系統程式 : sed, grep, find, bash, zsh, perl, PHP, python•

因為需要明白的事太多了，那就明天吧 !需要後悔的事太多了，那就後天吧 !需要改的東西太多了，那就改天吧 !

需要換的設備太多了，那就換老闆吧 !

Git 用途掌握了 git ，掌握了歷史的分支。

起初幫助 Linux 社群開發作業系統•原來的版本控制 CVS 對社群不再友善 ( 要錢 / 很多功能不實用 )• 自己社群的版本控制系統自己幹 by Linus• 後來大家發現這個工具實在太猛了，在各種意義上。• 輕量 + 高效 + 方便追蹤專案 ( 出生入死 ) / Code Review + 盡情開分支版本 + 去中心化 ( 大家可以自己玩自己的 ) + 方便整合版本及解決衝突。• 到底有多猛呢 ?

作業系統版本分支的複雜度Linux Distribution Timeline

Unix Distribution Timeline

Git 可以追蹤整個專案的進化 / 分支 / 還原

Git 介紹“Copy and Paste from Wikipedia”

3 分鐘了解 git 的出生1. 以前 Linux 社群是使用

BitKeeper 。2.但是 BitKeeper 跟 Linux 社群間有一些嫌隙與紛爭，而且 BK 不是自由軟體。3. 然後 Linus 大大花了十天自幹一個自己理想的版本控制系統。 ( 雖然本人有點傲嬌，自謙這是個混帳 (git) 軟體 ) ，由於

4. Linus 在 2005 年將軟體維護遞交給 Junio Hamano 大大5. git 綜合先前版控軟體的優點，並加以強化，良好支持多人多工開發大型專案。

Git 用法 常用指令以及版本控制流程

指令一 git init1. 找一個你要追蹤的專案2. 到專案目錄底下3. 執行 git init4. 指令會在目錄底下創建一個版本控制容器 .git 資料夾5. 你就可以開始版本控制了

git init 示範

指令二 git commit• 版本控制每一個版本最小的單位就是 commit• 每次 commit 可以加入或刪除 不限次數的檔案、程式碼• 所有修改都會記錄在 .git 裡面•軟體只記錄跟上次版本不一樣的地方 (如果前面遺失的話… )

完成一次版本的流程CRUD

git add / git rm

git commit

C: CreateU: UpdateD: Delete

git commit 示範

輔助指令三 git status •快速查看專案目錄下的所有檔案變化•快速查看 以下訊息• 尚未加入版本控制的檔案• 修改還沒成為新版本的檔案 • 這次新版本預計要提交的檔案

git status 示範

加入 / 移除 指令 git add / git rm• git add• 加入追蹤檔案• 加入修改檔案• 做為新的一個版本

• git rm• 在下一個版本移除追蹤檔案

版本分支、支線、嘗試路線、胡搞瞎搞

圖片來源

分支指令 git branch• 為何要開分支？• 專案同時有不同的開發方向時。•想嘗試不同架構、演算法。• 就像遊戲裡的每個選項分支，先存檔然後選其他選項看看。•因為分支不影響原來的主線。• 而且 git 開分支的成本很低，只有分支跟上個版本差異。• 覺得分支版本走向不錯可以合併回主線。• 所以一般開發分支做為相鄰兩個主線大版本比如說 1.0 -> 2.0 ，中間所有的開發嘗試過程與細節。

git branch 示範 開新分支 git branch + [name]

顯示當前分支 git branch

查看版本指令 git log• 就是查看所有版本的指令

選擇分支 + 選擇版本 指令 git checkout•先查看版本名字• git log•選擇版本• git checkout [ 版本雜湊碼 ]• 或選擇分支• git checkout [ 分支名 ]•如果選擇分支的話•預設是分支最新的版本位置• ( 或是目前指標位置 )

git checkout 示範

Git 指標位置• Branch 名字通常指向對應分支最新的版本• Git 裡面有一個指標叫做

HEAD 指向你現在這個版本• HEAD 在遊戲中可以說是現在玩得存檔•相對符號 HEAD^ 指得是現在前一個版本位置• 所以可以這樣做• git checkout HEAD^

操作分支指令 git branch –f [source] [target]•相對符號還可以用 ~• HEAD~3 •代表現在往前三個版本• master~2 •代表 master 分支前兩個版本• git branch –f 將一個分支移動• 到另外一個分支，例如 :• git branch –f master~2 HEAD^

視覺化展示 http://learngitbranching.js.org

重寫歷史、時光回朔 指令 git reset 、 revert• 覺得最新的版本有問題•想回到以前版本• reset 、 revert 不同作法• git reset [ 版本 hash] 是往前回朔就版本。• git revert [ 版本 hash] 將前面版本，加入新版本 。

git revert 和 git reset 示範

視覺化展示 git reset 和 git revert

合併分支指令 git merge• 可以將兩個不同版本合併• 有衝突就解決衝突• 關於 git merge 合併版本的策略 可以參考• https://git-scm.com/docs/merge-strategies•想一下合併 遊戲存檔會遇到的情況有點複雜

git merge 示範

解決合併版本的衝突

連結全世界的版本與分支Git Remote

加入 / 移除 網路上的版本來源•查詢目前所有來源• git remote –v•加入網路來源• git remote add [name] [url] • 移除網路來源• git remote remove [name] [url]

git remote add / git remote remove 示範

從遠端更新版本 git pull•下載網路來源的更新版本，抓下來合併• 可以指定來源專案的哪個分支、哪個版本• 解決衝突• git pull [remote name] [branch]

更新遠端的版本 git push• 上傳自己的版本到遠端網路上的伺服器。•也可以指定上傳到遠端哪些分支。• git push [remote name] [branch]

git pull / git push 示範

簡單回顧

Git 實務師父領進門，修行在個人。

經驗談• 很不推薦用 git reset --hard •真得發生了…… 想辦法找暫存檔，請服用 http://

stackoverflow.com/questions/5788037/recover-from-git-reset-hard•進階 git add – 細部設定要提交的東西• 很很很不推薦用 git push –f [remote name] [branch]•除非你不小心把信用卡金鑰上傳到公開的網路專案去了• 有必要用到 git branch –d [branch name] 刪除分支嗎 ?• Git Tips : http://www.alexkras.com/19-git-tips-for-everyday-use/

理想的開發專案流程 Git Flow• 一般 Git 開發流程，可以參考 :• https://www.atlassian.com/git/tutorials/comparing-workflows• 這部分我覺得百家爭鳴，但是可以參考 :• http://nvie.com/posts/a-successful-git-branching-model/

Git 軟體 內部的資料結構 •如果你想要開發一個像 git 一樣的軟體。• 這實在是太細節了 !•直接參考 Pro Git (Git Bible) 裏的 Git Internals 章節• https://

git-scm.com/book/en/v2/Git-Internals-Plumbing-and-Porcelain• 像是 blob 、 tree 、 commit 、 tag …

常見問題• 我在同一個專案之下，輸入兩次 git init 會發生什麼事 ?•兩個完全不一樣的容器，可以 git merge 嗎 ?• 我手動刪除了檔案，但是 git commit 過後，其他人檔案還是在。• 從不同來源的遠端專案來更新自己的專案。• 每次版本更動是以檔案為單位的嗎 ?• 在分支 merge 回主線，跟主線 merge 分支有什麼不一樣 ?• 程式碼遇到衝突好處理，圖片呢 ?

Git 延伸“The Big Bang Theory”

衍伸出很多 文化 跟 第三方服務• Third party Git server and service• Github 、 Bitbucket 、 GitLab 、 GitCafe 、 Coding.net … [6]

• 版本控制視覺化 (JS) - http://gitgraphjs.com• 台北市政府 Github : https://github.com/taipeicity•普林斯頓數學家，用 GitHub 寫成 600頁專書！ : http://

wired.tw/2013/07/08/writing_on_github/index.html• GitBook 柯文哲市政白皮書 : https://

www.gitbook.com/book/doctorkowj/kppolicy/details•找工作、寫請帖、法律契約、創業 …

一堆教材• [1] http://www.slideshare.net/littlebtc/git-5528339• [2] http://www.slideshare.net/pokaichang72/git-42427674• [3] http://learngitbranching.js.org• [4] http://backlogtool.com/git-guide/tw/• [5] https://ihower.tw/git/• [6] https://git-scm.com/book/en/v2• [7] http://gitimmersion.com• [8] http://www.slideshare.net/cha122977/git-rebase-i

參考文獻[1] Learn Git Branching, Peter Cottle, http://learngitbranching.js.org[2] Git Beginner‘s Guide for Dummies., BackLog Company, http://backlogtool.com/git-guide/tw/[3] Pretty git branch graphs, StackOverflow.com, http://stackoverflow.com/questions/1057564/pretty-git-branch-graphs[4] Git Ready, http://gitready.com[5] Git Ref, http://gitref.org[6] 12 Git Hosting Services Compared, Git Tower, https://www.git-tower.com/blog/git-hosting-services-compared/