---
# System prepended metadata

title: Gulp任務管理器
tags: [Tool]

---

###### tags: `Tool`
# Gulp任務管理器
## 環境安裝
### 步驟一 : 安裝[Git](https://git-scm.com/)。
### 步驟二 : 安裝LTS版本的[Node.js](https://nodejs.org/en/)，打開cmd輸入`node -v`查看是否有顯示版本號。
### 步驟三 : 輸入`npm i gulp@4 -g`安裝gulp後，輸入`gulp -v`查看是否有顯示版本號。
### 步驟四 : 下載[資料夾](https://github.com/hexschool/web-layout-training-gulp)，並解壓縮。
### 步驟五 : 輸入`cd 資料夾路徑`切換到該資料夾。
### 步驟六 : 輸入`npm install`安裝package.json裡的插件。
### 步驟七 : 輸入`gulp`執行。
### 步驟八 : 執行成功會打開瀏覽器顯示網頁。

## 部屬網頁到Github Page
```
建立空間 : New Repostory
git config --global user.name "name"
git config --global user.email "mail"
git init 若已經初始化可以不用輸入
git add .
git commit -m "first commit"
git remote add origin [GitHub Repositories Url]
git push -u origin master 僅第一次輸入，往後只需要輸入 git push
```
當將 Gulp 原始碼初次部署到 GitHub 之後，可以依照以下兩步驟來更新網站

步驟一：gulp build 進入生產模式
步驟二：當生產完畢之後接下來只需要輸入 gulp deploy 即可完成 GitHub Pages 部署。

## 此範例所提供的功能
- 使用 EJS 做版型管理
- 支援 SCSS 編譯功能
- 儲存檔案時，瀏覽器會自動更新，不需持續按 F5
- 整合 GitHub 服務，能做到一鍵上傳網站空間