git 教學 + gif 操作動畫 [下載]

60
Git 介介 介介介介介介 介介介介介 介介介介

Upload: leon-lin

Post on 15-Feb-2017

59 views

Category:

Presentations & Public Speaking


0 download

TRANSCRIPT

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

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

林彥廷

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

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

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

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

<< 聖經 約伯紀 >>

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

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

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

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

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

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

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

支線主線 魔王前存檔 結局

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

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

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

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

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

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

“However the devil is in the detail.”

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

Master

Senior

Junior

Beginner

十分鐘看工程師的一生

今天的報告在這裡 Bottom Up

Top Down ?

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

• 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 就上手

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

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

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

React …)

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

善用工具•套件控制 : 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•

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

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

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

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

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

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

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

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

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

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

Git 介紹“Copy and Paste from Wikipedia”

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

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

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

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

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

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

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

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

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

git init 示範

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

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

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

完成一次版本的流程CRUD

git add / git rm

git commit

C: CreateU: UpdateD: Delete

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

git commit 示範

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

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

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

git status 示範

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

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

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

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

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

圖片來源

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

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

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

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

顯示當前分支 git branch

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

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

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

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

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

git checkout 示範

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

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

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

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

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

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

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

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

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

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

git revert 和 git reset 示範

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

視覺化展示 git reset 和 git revert

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

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

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

git merge 示範

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

解決合併版本的衝突

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

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

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

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

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

git remote add / git remote remove 示範

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

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

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

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

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

git pull / git push 示範

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

簡單回顧

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

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

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

經驗談• 很不推薦用 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/

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

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

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

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

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

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

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

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

Git 延伸“The Big Bang Theory”

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

衍伸出很多 文化 跟 第三方服務• 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•找工作、寫請帖、法律契約、創業 …

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

一堆教材• [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

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

參考文獻[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/