課前該用好的 gulp by Sz

# 課前該用好的 gulp by Sz ###### tags: `Sz` `第四週` `gulp` `2021夏季切版班` - [gulp 環境安裝流程](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view) :::info - 目前已知 - 有了 gulp，live server 再見 - 有了 gulp，scss 編譯器再見 - 有了 gulp，可縮短 html 縮排（版型管理） - 有了 gulp，不用再自己複製貼上每一頁的 header, footer - 有了 gulp，版本控制更輕鬆（git） - 有了 gulp，原圖拖垮網速悲歌再見（圖片壓縮） - 有了 gulp，js 不同瀏覽器的相容性問題再見 ::: ## gulp 環境設置 ### 一台電腦做一次 ::: info :::spoiler 全域安裝 1. 確認是否安裝 [Node.js](https://nodejs.org/en/) (這邊省略安裝步驟) ``` node -v ``` 2. 安裝 gulp （失敗請參考下面一行） ``` npm i gulp@4 -g ``` #### 失敗的話，用管理員權限安裝（限mac） ``` sudo npm i gulp@4 -g ``` 3. 檢查是否安裝好 gulp ``` gulp -v ``` ![](https://i.imgur.com/HIqPwuz.png) 類似這樣即可 ::: ### 一個資料夾做一次 :::warning 你知道你現在在哪嗎？ ![](https://i.imgur.com/uCiA2lV.png) 看這行，每次輸入指令都會跳出來每次都應該要意識到在哪 cd 的指令會改變路徑可以額外開 terminal 去觀察變化 ::: 1. [下載資料夾](https://github.com/hexschool/web-layout-training-gulp)，更改成想要的專案名稱 #### 在該資料夾 2. 在該資料夾安裝 plug-in ``` npm install ``` 3. 在該資料夾執行 gulp，會跳出瀏覽器，即時監看 ``` gulp ``` 4. terminal 停止監看 ``` ctrl + C // 不是 command + C ``` 之後一樣打 `gulp` 都可以叫回來，不用擔心 5. 來開始建置 git 囉 ## git 確認電腦有沒有安裝 git ``` git ``` ### 對該資料夾 1. 初始化，會產生 .git 隱藏資料夾 ``` git init ``` :::success #### 程式端更新（到這裡只有本機喔） 2. 讓 git 關愛所有檔案 ``` git add . ``` 3. 容易焦慮就檢查一下 git 有沒有真的關愛到大家，沒有紅字就可以繼續 ``` git status ``` 4. 有的話就提交囉 ``` git commit -m "輸入提交訊息" ``` 5. 再焦慮的檢查一下有沒有成功提交 ``` git log ``` 以上只有在本機內部做版本控制，但想要上傳到網路上的話，就要繼續往下做囉！ ::: ### 連上 github 遠端數據庫 1. github 上創新的 repository 2. 獲取網址 ``` git remote add origin <這裡貼入 github 給的網址> ``` 3. 焦慮的檢查一下有沒有真的連上遠端 - 有的話會顯示這個遠端數據庫的暱稱，暱稱就是上段預設 `origin` 的部份 - 沒有的話檢查一下網址有沒有打錯 ``` git remote ``` 4. 選擇分支（這邊還沒有很懂） ``` git branch -M main ``` 5. （僅限第一次）推上去 ``` git push -u origin main ``` :::success 6. （第二次開始）推上去 ``` git push ``` ### 遠端數據庫客戶端更新 1. 生產模式（還沒有很懂） ``` gulp build ``` 2. gh-pages（給客戶端演示用）建置，也會設定好 github pages，這段要給他耐心與愛心 ``` gulp deploy ``` 3. 檢查 github > setting > github pages > source 有沒有對，改完也要有耐心與愛心 4. github pages 給你的網址就是你的展示畫面囉！一樣要給他耐心與愛心 ::: :::success **綠色框框的內容，每次上傳更新都要做** ::: ## 編譯？編譯就像翻譯一樣，在溝通的雙方語言不同時就需要進行一個語言轉換的過程我們寫程式時也一樣，也很容易遇到我們寫的語言，跟處理的軟硬體，懂的語言不同的狀況這時候中間的轉換就會需要一個類似翻譯的動作這裡就可以先簡單理解為編譯囉 ## 學到的 gulp 編譯 gulp 整合了很多個原本往往要很多工具才能做到的事 - SCSS 是一個很好管理的 CSS 寫法，但瀏覽器不懂 - layout 的管理不想手動複製貼上，但瀏覽器也看不懂但瀏覽器是讀不懂的 - 圖片未經處理，檔案巨大 - js 常常每個瀏覽器看起來不一樣在 gulp 裡面，他 layout, scss, 圖片壓縮, js 兼容的管理都一併幫你完成囉！ ## 資料夾結構 - dist - 編譯後的結果 - **不要動** - app：撰寫資料的位置 - assets：HTML, CSS, JS, 圖檔影片等等放這，不要改名稱，以後可能會遇到會叫做 public 的 - script：gulp 幫你處理相容問題 - style：gulp 幫你編譯 - sass - images：：gulp 幫你壓縮省流量 - index.html：需要新增新頁面的話，複製這個檔案去改 - gulpfile.js - enbOptions.js：路徑，可查看輸出的路徑，若要更改路徑要記得 `ctrl+C` 關閉後，`gulp` 重開 ## 新增新頁面複製 index.html 去改名稱，如果要監看該頁面，在瀏覽器網址尾段加上該檔名 ### HTML 結構定義 layout 格式，可以對進行共通設定 ``` --- title: <title> // head 裡面那個 title 標籤 layout: ./app/layout.ejs // 共同版型， header, footer 終於幸福ㄌ engine:ejs // 使用的樣板語言，跟我們所學的內容很像 current:index // 暫時不動囉 --- <body 內容> ```

Syntax	Example	Reference
# Header	Header	基本排版
- Unordered List	Unordered List
1. Ordered List	Ordered List
- [ ] Todo List	Todo List
> Blockquote	Blockquote
Bold font	Bold font
Italics font	Italics font
~~Strikethrough~~	~~Strikethrough~~
19^th^	19^th
H~2~O	H₂O
++Inserted text++	Inserted text
==Marked text==	Marked text
[link text](https:// "title")	Link
![image alt](https:// "title")	Image
`Code`	`Code`	在筆記中貼入程式碼
```javascript var i = 0; ```	`var i = 0;`
:smile:		Emoji list
{%youtube youtube_id %}	Externals
$L^aT_eX$	L^aT_eX
:::info This is a alert area. :::	This is a alert area.