# gulp 與 git
---
###### tags `夏天` `第二週`
---

* gulp如果要比喻的話比較像是去costco可以買到一次所有的東西，然而在傳統市場裡面就得一攤一攤買，大致上這樣。
https://awdr74100.github.io/2019-12-24-gulp-install/

* Git的話則是類似costco裡的店員需要不斷的更新貨架上的產品確保新鮮避免客人買到過期或者不堪用的。
https://gitbook.tw/chapters/introduction/what-is-git.html

* 六角的youtube上也有很多影片可以參考看看
https://www.youtube.com/channel/UC-b2nGm0xLzic38Byti0VjA/search?query=git

* 從 0 到 1 的 GitHub Pages 教學手冊
https://hackmd.io/@Albertnotes/B1_iKcAwI
* 從gulp開始
https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view

* 很有趣的GitHub
https://github.com/wenyan-lang/wenyan

* Git error - Fatal: remote origin already exists and how to fix it
https://www.datree.io/resources/git-error-fatal-remote-origin-already-exists

:::info
git remote set-url origin [GitHub Repositories Url]
git remote add origin [GitHub Repositories Url]
git remote remove origin

:::

* 用cmd上傳github步驟
git init # 若已經初始化過就可以不用輸入
git add .
git commit -m "first commit"
git remote add origin [GitHub 　　Repositories Url]
git branch -M main
git push -u origin main// 僅限第一次輸　入，往後只需要輸入 git push
###### 因為github內默認index.html為首頁，所以如果首頁名稱不是index.html需在pages後加上自己的首頁名稱，另若圖片較多需等待一下，由藍色方框轉成綠色的發佈成功

---
ejs是一個版型管理方式

---
> 透過 Gulp 部署網站流程

* layout(共通區塊)，比方說頁首(header)頁尾(footer)及選單(nav-bar)(side-bar)，每個頁面永遠會在畫面上的區塊

* 在terminal要先打gulp看有沒有被執行，被執行就會出現首頁，vscode開啟資料夾後dist內的index.html是被產生出來的，這個資料夾內的東西都不要動，開發時要修改文件應在app資料夾內找尋檔案。

* 
* 
* 

* <% -content %>挖空部分就是拿來放置每頁不同的內容區塊

* [name=Summer.H]
(https://i.imgur.com/qL4Zi0G.png)
* title為頁面名稱可自行命名
1. layout:要引用的layout檔案，有時候會不只一個
2. engien:要使用的引擎
3. current:自己新增的變數(名稱)

* app資料夾中的index.html+layout.ejs=dist資料夾中的index.html

* 
因為是在layout部分增加內頁1，所以所有頁面都會出現

* 若要開啟其他頁面，則須在網址後面加上頁面名稱

* 若要新增內頁則複製title......等四行內容稻頁首部分即可
* 編譯過程

* asses(資產，scss、js、img)，將資料全部放在assets資料夾內，style放置css相關，images放置圖片，js放置javascript，放置靜態文件

* js編譯範例

---

關機後要如何重新上傳資料
1. cd (資料夾位置)→gulp，重新編譯網頁
2. ctrl+c，中斷gulp
3. gulp build
4. gulp deploy
5. 即可更新網頁(可能下才會完整更新)