iT邦幫忙

2017 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

網頁程式設計so easy系列 第 3

Day3 [開發網頁的測試環境與工具-2]

  • 分享至 

  • xImage
  •  

專案版本控制

下載Git

下載網址:https://git-scm.com/downloads
下載時要注意,在下面步驟要選擇以下圖片之選項
http://ithelp.ithome.com.tw/upload/images/20161205/20103385q6VFGFRqKp.png
http://ithelp.ithome.com.tw/upload/images/20161205/20103385SOTvsOn9MG.png
下載完後,搜尋cmd(命令提示字元),輸入git --version
如果有顯示結果即代表安裝成功。

版本控制

  1. 申請GitHub帳號,GitHub有點類似dropbox,會將我們寫好的程式存在這個線上空間,並且可以清楚看見各個版本的差異,或更改內容的帳號。這對於多人一起進行的專案是一個很方便的工具。
    GitHub網站:https://github.com/
  2. 關於版本控制、git、git Command等資訊可參考下面教學資源區提供的免費電子書。
  3. 建立新的資料夾(存放程式之位址)
    至github登入,在右上角處頭像旁有個+字號,選擇New repository,輸入資料夾名稱、簡介等資訊即可建立新資料夾。
    http://ithelp.ithome.com.tw/upload/images/20161205/20103385JoObwjkoNW.png
    http://ithelp.ithome.com.tw/upload/images/20161205/201033851yuboM4ICe.png
  4. 如果是要建立一網站,要在新建立之資料夾的setting處做設定
    http://ithelp.ithome.com.tw/upload/images/20161205/20103385yo0IwTWdc1.png
    按下Launch automatic page generator>Continue to layouts>publish page
  5. github會跳出訊息,顯示此頁面之網址(http://smallone1.github.io/ithelp_demo)
    http://ithelp.ithome.com.tw/upload/images/20161205/20103385MJq8QMjsnJ.png
  6. 此時就可以在第五步驟的網址找到剛剛儲存的網頁。如果專案做到後面忘記網址該怎麼辦?可以在資料夾內的setting>GitHub Pages找到此網址。
  7. 至資料夾下的Branch選項選擇gh-pages,即可看到stylesheets資料夾、index.html等檔案,想了解更多github pages可參考網站:https://pages.github.com/
  8. 修改index.html或增減自己會使用到的頁面、元件後,網頁即完成!

常用語法(Git Command)

當打開git shell時,會先將root改成本機github專案資料夾,此時就會使用到以下語法
cd (change directory)->將root改成本機github專案資料夾
cd .. 往上移一層資料夾
ls 看root下所有資料
git clone https://github.com/~/~.git 當團隊中有人已開啟了一個在 Git Server 上的 Git 資料夾,那我們就可以使用 Git clone 來將這個資料夾抓來自己的 local 端一起進行開發。
mkdir XXXX 新增一個名為XXXX的資料夾,使用git shell來新增會比較快速
git status 我們可以使用 git status 來觀察 Git 資料夾的狀態,比如目前所在的 branch 及 哪些檔案還沒 commit、哪些檔案需要被added 等等。
git add . 使用 git add 可以將新增的檔案加入 git 版本控制,後面的.是代表將所有剛剛修改過或新增加的檔案一次加入。
git commit –m "put message here..." 這個指令下去就會將資料提交,在github分支圖就會變成一個節點,後面如果有帶comment,之後會比較好追溯。
git push 將 local 端的 commit 更新到 Server 上,未經過commit的檔案就無法使用 git push。

git相關介紹部落格推薦:http://gogojimmy.net/2012/01/17/how-to-use-git-1-git-basic/

教學資源

關於Git之免費電子書:https://git-scm.com/book/en/v2
中文版:https://git-scm.com/book/zh-tw/v1
(可只看前三章節)

Browser-Sync

下載

  1. 先下載node.js
    網址:https://nodejs.org/en/download/
    下載完後,搜尋cmd(命令提示字元),輸入node --version
    如果有顯示結果即代表安裝成功。
  2. 下載browser-sync
    網址:https://www.browsersync.io/
    其可以使用npm的方式來下載,首頁即有教學
    在命令提示字元裡輸入npm install -g browser-sync,即正常下載。
    下載完後,如要確定是否有安裝成功可開啟命令提示字元,可輸入browser-sync --version
    如果有顯示結果即代表安裝成功。

語法

開啟git shell,將root資料夾cd到專案資料夾(欲同時修改、瀏覽的網頁所在資料夾)
browser-sync start –server –directory –files "**/*"
則當我們在文字編輯器上修改並存檔的部分就會即時的反應在瀏覽器上。


上一篇
Day2 [開發網頁的測試環境與工具-1]
下一篇
Day4 [HTML語法介紹-1]
系列文
網頁程式設計so easy30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言