︿
Top

2018年7月16日 星期一

Sublime Text 3 與 Git (GitHub) 版控機制的整合

0.. 前言


距離前一次使用 Sublime Text 已經快 4 年了, 筆者當時寫了一篇 "Sublime Text 3 操作 與 Emmet 套件安裝及使用 "; 最近因為參加一門 Bootstrap 4 的課程, 而有機會再次接觸.

本文主要在於說明 Sulime Text 與 git (github) 版控機制的整合; 雖然網路上可以查到一些文章, 但總是自己下去作過, 有痛過, 才會有經驗, 故作成筆記, 供有興趣的朋友參考.

本文共區分以下幾個段落, 相關的範例, 可 由此下載.
1.. 以 Package Control 安裝 git plug-in.
2.. 建立一個測試資料夾 (z1-vc_test), 並複製 bootstrap 4 相關的 css 及 js, 建立一個 01.html (based on bootstrap 4 範本)
3.. File / Open Folder ...
4.. 建立 project 及 workspaces
5.. 以 Package Control 安裝 gitignore plug-in.
6.. 建立 .gitignore 檔案, 並存檔
7.. 將現有專案加到本地 Git
8.. 建立第 1 個版本
9.. 加入 1 個檔案試試 ( 02.html )
10.. 查詢異動歷程
11.. 異動1個檔案(01.html), 刪掉1個檔案(02.html) 試試
12.. 上版到 GitHub

事先需準備的環境如下:
(1) SublimeText 3 : 可參考筆者的 這篇, 進行安裝及設定
A. Package Control 套件
B. Emmet plug-in
(2) Git : 可 由此下載及安裝
(3) GitHub : 已申請帳號, 並會建立 repository.



1.. 以 Package Control 安裝 git plug-in.



安裝 Git plug-in for Sublime Text

2.. 建立一個測試資料夾 (z1-vc_test), 並複製 bootstrap 4 相關的 css 及 js, 建立一個 01.html (based on bootstrap 4 範本)


建立測試資料夾


3.. File / Open Folder ...


以 Sublime Text 開啟資料夾

4.. 建立 project 及 workspaces


儲存 Sublime Text 專案檔

儲存 Sublime Text 專案檔

儲存 Sublime Text 專案檔

5.. 以 Package Control 安裝 gitignore plug-in.



安裝 Gitignore plug-in for Sublime Text


6.. 建立 .gitignore 檔案, 並存檔


建立 .gitignore

選擇 SublimeText 的 .gitigonre

建立 .gitignore

建立 .gitignore

建立 .gitignore


存檔


建立 .gitignore (存檔)


參考其它超連結, 補充一些 ignore 的部份 https://github.com/github/gitignore/blob/master/Global/SublimeText.gitignore

建立 .gitignore (參考其它作者的寫法)


7.. 將現有專案加到本地 Git

add project to local Git

add project to local Git

add project to local Git


8.. 建立第 1 個版本


(1) 準備要 include 的檔案清單

optoin 1:

建立第1個版本 (option 1)

optoin 2:

建立第1個版本 (option 2)


(2) Add Files ...

建立第1個版本 (add files)


(3) Commit

建立第1個版本 (commit)


(4) Write Log Message, then 關閉 COMMIT_EDITMSG 檔案

建立第1個版本 (save change log)


(5) 會顯示總共加了多少異動.

建立第1個版本 (review change log)


[master (root-commit) 23497b2] version 01
23 files changed, 21700 insertions(+)
create mode 100644 .gitignore
create mode 100644 01.html
create mode 100644 css/bootstrap-grid.css
create mode 100644 css/bootstrap-grid.css.map
create mode 100644 css/bootstrap-grid.min.css
create mode 100644 css/bootstrap-grid.min.css.map
create mode 100644 css/bootstrap-reboot.css
create mode 100644 css/bootstrap-reboot.css.map
create mode 100644 css/bootstrap-reboot.min.css
create mode 100644 css/bootstrap-reboot.min.css.map
create mode 100644 css/bootstrap.css
create mode 100644 css/bootstrap.css.map
create mode 100644 css/bootstrap.min.css
create mode 100644 css/bootstrap.min.css.map
create mode 100644 js/bootstrap.bundle.js
create mode 100644 js/bootstrap.bundle.js.map
create mode 100644 js/bootstrap.bundle.min.js
create mode 100644 js/bootstrap.bundle.min.js.map
create mode 100644 js/bootstrap.js
create mode 100644 js/bootstrap.js.map
create mode 100644 js/bootstrap.min.js
create mode 100644 js/bootstrap.min.js.map
create mode 100644 z1-vc_test.sublime-project



9.. 加入 1 個檔案試試 ( 02.html )


(1) 加入 02.html 後, 存檔

異動: 加入 1 個 .html 檔 (02.html)


(2) 試著 git commit 看看, 結果它會告訴您有錯 ...

異動: 加入 1 個 .html 檔 (02.html)
異動: 加入 1 個 .html 檔 (02.html), 明明有加入, 卻告知沒有需要 commit ?!


(3) 這是怎麼一回事? 因為我們 "還沒有選" 那些修正後的程式, 要列入本次的 Commit 範圍.

[註] 也就是要 follow Add, then Commit 的作法

(4) Add ...

異動: 加入 1 個 .html 檔 (02.html) (add files)


(5) Commit ...

異動: 加入 1 個 .html 檔 (02.html) (commit)


(6) Write Log Message, then 關閉 COMMIT_EDITMSG 檔案

異動: 加入 1 個 .html 檔 (02.html) (write change log)


version 02 (add 02.html)

# --------------
# Please enter the commit message for your changes. Everything below
# this paragraph is ignored, and an empty message aborts the commit.
# Just close the window to accept your message.
diff --git a/02.html b/02.html
new file mode 100644
index 0000000..40fbbe4
--- /dev/null
+++ b/02.html
@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+
+
+    <title>Hello, world!</title>
+  </head>
+  <body>
+
+    <h1 class="text-center">Hello 02</h1>
+
+    <!-- 選擇性的 JavaScript -->
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
+  </body>
+</html>
\ No newline at end of file



(7) 會顯示總共加了多少異動.

異動: 加入 1 個 .html 檔 (02.html) (review change log)


10.. 查詢異動歷程


Query change log


選取以下任 1 個版本, 就可以看到該版本的異動歷程

Query change log
Query change log

11.. 異動1個檔案(01.html), 刪掉1個檔案(02.html) 試試


(1) Add ...

Modify 01.html, Remove 02.html (add files)


(2) Commit ...

Modify 01.html, Remove 02.html (commit)

Modify 01.html, Remove 02.html (commit)


修正1支程式(01.html), 刪除1支程式(02.html)

# --------------
# Please enter the commit message for your changes. Everything below
# this paragraph is ignored, and an empty message aborts the commit.
# Just close the window to accept your message.
diff --git a/01.html b/01.html
index e2c14a8..0668876 100644
--- a/01.html
+++ b/01.html
@@ -10,7 +10,7 @@
   </head>
   <body>
-    <h1 class="text-center">哈囉～哩後！</h1>
+    <h1 class="text-center">Hello 01</h1>
     <!-- 選擇性的 JavaScript -->
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
diff --git a/02.html b/02.html
deleted file mode 100644
index 40fbbe4..0000000
--- a/02.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!doctype html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-
-
-    <title>Hello, world!</title>
-  </head>
-  <body>
-
-    <h1 class="text-center">Hello 02</h1>
-
-    <!-- 選擇性的 JavaScript -->
-    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js" integrity="sha384-cs/chFZiN24E4KMATLdqdvsezGxaGsi4hLGOzlXwp5UZB1LY//20VyM2taTB4QvJ" crossorigin="anonymous"></script>
-  </body>
-</html>
\ No newline at end of file



Modify 01.html, Remove 02.html (review change log)


12.. 上版到 GitHub


(1) 在 GitHub 建立 repository : sublime-test; 建立完成, 就會出現以下畫面

Push to GitHub


(2) 在 git shell 進行以下操作.

D:\>cd "D:\Temp\z1-vc_test"
D:\Temp\z1-vc_test [master]> git remote add origin https://github.com/jasper-lai/sublime-test.git
D:\Temp\z1-vc_test [master]> git push origin master
Username for 'https://github.com': .......
Password for 'https://......@github.com':
Counting objects: 33, done.
Delta compression using up to 4 threads.
Compressing objects: 100% (32/32), done.
Writing objects: 100% (33/33), 412.25 KiB | 0 bytes/s, done.
Total 33 (delta 14), reused 0 (delta 0)
remote: Resolving deltas: 100% (14/14), done.
To https://github.com/jasper-lai/sublime-test.git
* [new branch] master -> master
D:\Temp\z1-vc_test [master]>

(3) 檢視 GitHub 的狀況.

Push to GitHub

Push to GitHub

Push to GitHub



張貼者： 於
標籤： , ,

沒有留言:

張貼留言

訂閱： 張貼留言 (Atom)