---
tags: 網頁切版
---
# Gulp 教學

## gulp 課前環境安裝 Git

進入 Gulp 的教學之前需要安裝 Git 軟體，請依照以下三步驟安裝即可~
1. 點擊 [Git 官方網站](https://git-scm.com/)連結
2. 進入後，網頁右方會自動判斷您的系統，點擊即可下載，下載後就可進行安裝~
3. 如果您是使用 Mac 電腦，請打開內建軟體「終端機」，如果您是使用 Windows 電腦，請點選「開始>執行>輸入 cmd」，開啟「命令提示視窗」，輸入以下指令藉此設定 Git 環境：
* `git config --global user.name "您的姓名"`
* `git config --global user.email "您的Email"`

沒有回傳任何字代表有設定成功，所謂沒有消息就是好消息的概念

## 透過 Gulp 做前端任務化管理
Gulp 是一個前端任務工具，是用JavaScript去寫很多工具出來，減少瑣碎流程

[本 Gulp 範例](https://github.com/hexschool/web-layout-training-gulp)所提供的功能：
1. 使用 EJS 做版型管理，可參考說明:[Day11. MVC網站框架(四)使用EJS樣版動態生成網頁](https://ithelp.ithome.com.tw/articles/10187106)
2. 支援 SCSS 編譯功能
3. 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
4. 整合 GitHub 服務，能做到一鍵上傳網站空間(gulp deploy)

## gulp 環境安裝流程
說明：gulp 為 Node.js 的套件，所以安裝 gulp 前請先安裝 Node.js

### 步驟一：安裝 [Node.js](https://nodejs.org/en/)，node 版本請安裝 v14 版本：
* Windows 64-bit Binary: https://nodejs.org/dist/v14.19.3/node-v14.19.3-x64.msi
* macOS 64-bit Installer: https://nodejs.org/dist/v14.19.3/node-v14.19.3.pkg
* macOS Intel 64-bit Binary（intel）: https://nodejs.org/dist/v14.19.3/node-v14.19.3.pkg
* [可以觀看此文章了解自己是 intel 還是 M1 晶片](https://support.apple.com/zh-tw/HT211814)

安裝完成，請打開終端機或命令提示字元，輸入 `node -v` 後按 Enter，看是否有顯示版本號
* PS1：Mac 請按 command+空白鍵，輸入「terminal」打開終端機
* PS2：Win 請按 開始 > 執行 > 輸入「cmd」打開命令提示字元
* Win10 執行視窗快速鍵為 `win + R`

### 步驟二：在終端機安裝 gulp，繼續輸入指令 `npm i gulp@4 -g` 按 Enter 安裝
輸入 gulp -v 查詢是否有回報版本號。如果您是 MAC 請用 `sudo npm i gulp@4 -g`

步驟三：下載此[資料夾](https://github.com/hexschool/web-layout-training-gulp)，並解壓縮檔案

#### 補充:
建議解壓縮檔案放在桌面;先前放在D槽中文名稱目錄底下,後續deploy會發生異常.

### 步驟四：命令提示字元視窗將路徑移動到該目錄路徑
cd + 空白 ，再將剛才解壓縮檔案目錄夾拉至命令圖示字元轉換為路徑後，再按下Enter。
如果移動成功，win 輸入指令dir、Mac 輸入指令 ls，可以觀看該資料裡的檔案列表。

#### 補充:
* cd+空白+tab 可以查看該目錄的資料夾
* cd c:\ 可切換到c目錄 , 若要切至D目錄需要先回到c目錄
* dir 可以查看該目錄的檔案列表

### 步驟五：輸入指令 `npm install` 安裝插件

### 步驟六：輸入指令 `gulp` 執行

### 步驟七：若步驟六執行成功，會打開瀏覽器開啟index網頁，就代表你全部都成功了！

## gulp 資料夾結構

* App # 原始碼
* assets # 靜態資源放置處，資料夾不要動，因為envOption有設定編譯路徑
* images # 圖片放置處
* js # JavaScript 放置處
* style # 樣式放置處
* index.html # 首頁 HTML
* layout.ejs # Layout ejs
* dist #編譯出來的結果，不要動
* gulpfile.js # Gulp 原始碼
* envOptions.js # Gulp 路徑變數
* dist路徑設定
* index.js # Gulp 核心原始碼
* gulp執行編譯語法

注意事項
`assets` 底下的資料夾名稱建議不要任意修改，例如：stlye 改成 styles 又或者是 scss 等非原始資料夾名稱。

最主要原因是 Gulp 預設是監聽 style、js、 images 這幾個資料夾路徑底下的檔案，因此若任意修改名稱將可能導致 Gulp 的監聽功能失效或其他不可預期之問題發生。

若本身已經對於 Gulp 有一定掌握度則可進入 gulpfile.js/envOptions.js 修改相關路徑即可。

Gulp 的自動更新行為是必須持續開著終端機的，因此若關閉終端機則會失去監聽與自動更新效果，因此在開專案時，請不要關閉運行中的終端機。

## 部署網頁到 GitHub Pages 上
將寫好的網頁透過 gulp 放在 GitHub Pages 網頁空間上

### 步驟一，請按Ctrl+c先將命令提示字元的gulp中斷，才能輸入指令
中斷後，依序執行以下指令:
`git init`
`git add .`
`git commit -m "first commit　這是註解說明"`
`git remote add origin [GitHub Repositories Url]`
`git push -u origin main`

補充
1. [GitHub Repositories Url] URL來自下圖儲存庫的資料>Code>紅框處

2. 若您是使用 Windows 電腦，以下細節還請留意：
(1) `git commit -m “first commit”`，請打成雙引號，而非單引號
(2) 執行完 `git push -u origin main` 時，系統可能會問你要選擇 1. Web Browser 2. Personal access token 供使用者選擇，還請選擇 1。
3. 執行 `git push -u origin main` 之後，[github](https://github.com/)會把本地端web-layout-training-gulp-master目錄檔案上傳至github


### 步驟二，執行以下指令進入生產模式:
`gulp build`

### 步驟二，當生產完畢之後執行以下指令 即可完成 GitHub Pages 部署。
`gulp deploy`

### 步驟三，Deploy完成後，在[github](https://github.com/)該專案除了main之外會多一個gh-pages目錄
* main :是開發者環境目錄
* gh-pages : 是由 dist 目錄對應產生,是提供客戶看的目錄


### 步驟四，Deploy完成後放到git hub上的網頁


## 第二次部署網頁到 GitHub Pages
`gulp build`
`gulp deploy`
再到hit hub 看 gh-pages目錄底下是否有被更新

## 參考資料
1. [gulp 環境安裝流程](https://hackmd.io/yWpLNMPRT2yvIR4Zq_idGw?view#%E6%AD%A5%E9%A9%9F%E4%BA%8C%EF%BC%9A%E5%9C%A8%E7%B5%82%E7%AB%AF%E6%A9%9F%E5%AE%89%E8%A3%9D-gulp%EF%BC%8C%E7%B9%BC%E7%BA%8C%E8%BC%B8%E5%85%A5%E6%8C%87%E4%BB%A4-npm-i-gulp4--g-%E6%8C%89-Enter-%E5%AE%89%E8%A3%9D%EF%BC%8C%E8%BC%B8%E5%85%A5-gulp--v-%E6%9F%A5%E8%A9%A2%E6%98%AF%E5%90%A6%E6%9C%89%E5%9B%9E%E5%A0%B1%E7%89%88%E6%9C%AC%E8%99%9F%E3%80%82)
2. [web-layout-training-gulp 檔案](https://github.com/hexschool/web-layout-training-gulp)
3. [命令提示字元 05：基本指令](https://lnpcd.blogspot.com/2012/07/05.html)
4. [Command Line 常用指令整理](https://hackmd.io/@Yu040419/B1KCuoiaE)

## 快速複習
1. cmd > cd+空白+解壓縮的web-layout-training-gulp 檔案目錄
* npm install 安裝模組(做一次就好)
* gulp >自動開啟網頁顯示Index.html
2. vs code 開啟 web-layout-training-gulp 檔案目錄
3. 部署網頁到hit hub上
* git hub新增網頁空間，取得git網頁空間網址URL
* gulp執行指令>ctrl+c取消執行
* git init 初始化
* git add . 加入成為第一次更新版本
* git commot -m "說明"
* git remote add origin gitURL ，如果出現遠端已存在就不需要再執行一次
* git push -u origin main ，第二次執行只要 git push即可
* gulp build 執行編譯模式(不會開啟瀏覽器)
* gulp deploy 將 dist 資料夾部署至 GitHub Pages
* git hub網站
* master 開發環境
* 網站會多一個gh-pages =>部署的內容會存在這裡，對應vscode的dist
* settings>pages>開啟URL

## 常見問題
### 隔天要繼續開發，並重新上傳，網頁更新流程是？
1. Ctrl+c 先中斷gulp
2. gulp build
3. gulp deploy : 將 dist 資料夾部署至 GitHub Pages ,main目錄不會被更新

### 要部署開發環境，流程是？
1. git add .
2. git commit -m "說明"
3. git push

### 要做第二個網站該怎麼做?
1. 重新下載web-layout-training-gulp 檔案目錄
2. 重新命名資料夾名稱做區分,git hub page新開一個網頁空間
3. 輸入指令 npm install 安裝插件>輸入gulp
4. 輸入上傳git bub 指令
* git init 初始化
* git add . 加入成為第一次更新版本
* git commot -m "說明"
* git remote add origin gitURL ，如果出現遠端已存在就不需要再執行一次
* git push -u origin main ，第二次執行只要 git push即可