---
tags: 網頁切版直播班 - 2021 夏季班
---

gulp 前端任務化教材設計
===

請志工依照以下步驟來測試教材

* 步驟一：觀看[影音課程](https://courses.hexschool.com/courses/202011/lectures/33077467)，總計以下影片
* 課前環境安裝
* 前言 - 透過 Gulp 做前端任務化管理 (2:11)
* Gulp 環境安裝 (上) (5:18)
* Gulp 環境安裝 (下) (7:29)
* GitHub Pages 部署網站流程 (上) (9:29)
* GitHub Pages 部署網站流程 (下) (7:56)
* GitHub Pages 補充說明 (12:27)
* 常見 QA (6:02)
* 步驟二：請看完 GitHub Pages 部署網站流程 (下) 後，影片會引導你將網站上傳到一個空間，並會提供一個網站網址給你，再請將該網址貼到回報區
* 步驟三：再請你看完上述影片，將您的學習體驗回饋給老師，並 tag 洧杰老師您已完成任務

回報區
---

## 洧杰(範例貼文)
* [GitHub Pages 練習網站網址](https://gonsakon.github.io/test23/)

### 1.操作時出現預期外的結果
* 整體操作蠻順的
### 2.建議可以改善文字的細節
* 在 hackMD 教學文件上有個錯字，建議可以改掉
### 3.看完影片覺得還是有點卡的地方
* 對網站路徑上覺得還有些問題

## JosephTang回報
* [GitHub Pages 練習網站網址](
https://jie810731.github.io/test-gulp/)

### 1.操作時出現預期外的結果
使用homebrew安裝node時，未指定安裝版本，安裝成16.4.2的版本，導致npm install會有錯誤，修正成lts就沒問題了
### 2.建議可以改善文字的細節
看完教學影片後，再參考hackMD文件可順利的完成，hackMD上都要想對應的指令參考，非常清楚。
### 3.看完影片覺得還是有點卡的地方
可以順利的完成操作

## GinJack回報
* [GitHub Pages 練習網站網址](
https://jack206418070.github.io/gulp-test/page2)

### 1.操作時出現預期外的結果
使用 mac npm install gulp@4 -g 因為沒使用
sudo 導致一開始安裝的 gulp
在最後 輸入 gulp 指令的時候跳出找不到此指令
### 2.建議可以改善文字的細節
文字細節我認為很清楚
一步一步照著做 非常容易可以做出來
### 3.看完影片覺得還是有點卡的地方
可能就是 gulp 操作流程 這部影片上
助教講完 git push 後
在 gulp bulid 的這一段節奏有點快
應該是剪接跳轉
直接就完成 gulp bulid
第一次操作的同學可能會先疑惑一下
其他我沒看到任何問題

## Gui Ting Liu 回報

* [GitHub Pages 練習網站網址](https://guitimliu.github.io/gulp-test/)

### 1.操作時出現預期外的結果

在操作時出現了這個～


結果後來發現是不知道為何裡面很多檔案都不見了 QQ
後來再下載一次就好了~ 若有遇到錯誤，或許也可以提醒他們檔案是否有完整 XD
（~~我就是存僥倖心態不去用 dir 看裡面檔案是否完整的人~~）

### 2.建議可以改善文字的細節

感覺生產模式那裡可以說明清楚一些～
雖然後來在補充說明有將這個部分說明了，
但一開始或許也可以說一下：前面是所有檔案、後面是只針對顯示出的檔案~
這樣或許能確保新手在觀看影片時，知道這一部分是在做什麼！

再來利用這個功能我們就不用額外特地去 Github 再去設定網址權限
感覺可以說明一下這些好處~

### 3.看完影片覺得還是有點卡的地方

可以順利完成操作~
（雖然因為第一次使用這工具，所以做了一些蠢事 XD）

---
## 蔡明達回報

* [GitHub Pages 練習網站網址](https://jacktsai890405.github.io/test123/)

### 1.操作時出現預期外的結果

- 於 GitHub Pages 開網頁空間
- New repository
- CMD

            # Debby Yeh 也有一樣的問題
            # Windows 版本單引號不行
            git commit -m 'first commit'
            # Windows 版本雙引號可以
            git commit -m "first commit"
            
            # 僅限第一次輸入，往後只需要輸入 git push
            git push -u origin master
            # 輸入完上面指令後 會跑出 1. Web Browser 2. Personal access token 供使用者選擇我與 Debby Yeh 都選擇 1. 不知道是否正確          

- 絕對不要碰到 app 資料夾以外的檔案
- 如果 GitHub Pages 網頁內容一直出現的是 README 裡面的資料，請把 .publish 資料夾刪除！
- 
- 如果執行 gulp build 指令時跑出來的內容如上述圖片相似，請再次刪除 .publish 資料夾！
>我就是因為上述兩個情境花了接近半天的時間，在處理安裝部屬上的問題。

### 2.建議可以改善文字的細節

HackMD 的步驟為
步驟三 解壓縮檔案
步驟五 npm install
步驟六 執行 gulp

> 所以每次解壓縮完都要於 cmd 裡面執行 npm install 嗎？

### 3.看完影片覺得還是有點卡的地方

尚無，只是過程中有一些問題已撰寫於上面

## aSong
* [GitHub Pages 練習網站網址](https://boisonchang.github.io/Gulp-gh-pages-test/)

### 1.操作時出現預期外的結果
* 在下載 gulp 時有思考一下是否能夠直接用 git clone 的，但後來想說照步驟做
* 第一次不太確定是要點進 gulp 的資料夾才能 npm install 有報錯一下
### 2.建議可以改善文字的細節
* 目前沒看到
### 3.看完影片覺得還是有點卡的地方
* 主要是我覺得每一個分頁就要新開一個 repositorites 有點卡，不確定老師已經寫好的 gulp 是無法放在同一個資料夾的嗎？
* 關於 gulp build 和 gulp deploy 的概念不是特別瞭解，只是大概知道是打包和開一個新的 branch 上傳

## ZY Hsu
* [GitHub Pages 練習網站網址](https://jenny010328.github.io/project/)

### 1.操作時出現預期外的結果
- 在輸入git init的時候不知道為何失敗了，後來全部關掉再開一次就正常了~
- 在輸入ctrl+c的時候，有多出這一行問我~ 我就選Yes~
- 

### 2.建議可以改善文字的細節

* 原文: 步驟四：移動到該資料夾，cd 移動到該資料夾
> 一開始有點看不太懂這句話，後來看影片、以及同學解釋後，自己重新理解了一下。
* 譯文: 在cdm中輸入「cd 」，並將該資料夾拖拉至該行。

### 3.看完影片覺得還是有點卡的地方
- 還好，只是第一次操作所以不太熟悉，要多想一下。

## debby yeh
* [GitHub Pages 練習網站網址](https://debbyyeh.github.io/gulp/)

### 1.操作時出現預期外的結果
- git commit -m "first commit"需要雙引號才可以成功
- 輸入完上面指令後 會跑出 1. Web Browser 2. Personal access token 供使用者選擇我選擇 1

### 2.建議可以改善文字的細節

原文: 當將 Gulp 原始碼初次部署到 GitHub 之後，可以依照以下兩步驟來更新網站
步驟一：gulp build 進入生產模式
步驟二：當生產完畢之後接下來只需要輸入 gulp deploy 即可完成 GitHub Pages 部署。

- 這一整段開始前我不知道要先按ctrl+c跳出後才可以輸入，導致我一直關掉cmd但卻發現都沒有辦法輸入文字。

### 3.看完影片覺得還是有點卡的地方
- 對於每次重新打開cmd後的流程不太確定要從哪一步在開始? 是要從cd拉資料夾後的步驟都要再重新做過一遍嗎?

## Dawn
[GitHub Pages 練習網站網址](https://dawn-syu.github.io/hexschool-student/)
### 1.操作時出現預期外的結果
1. 執行 git remote add origin [GitHub Repositories Url]指令，出現下圖的錯誤。
2. 忽略上個錯誤訊息，再執行git push -u origin master指令，出現下圖的驗證，以為是打密碼，查了一下發現不是。
3. 關掉上面那個驗證視窗後，再cmd內發現要我輸入使用者帳號跟密碼，輸入完，就成功了0.0...

### 2.建議可以改善文字的細節
1. 在一開始載入資料夾的七個步驟標題及指令能夠在更顯著一點，圖文搭配解說更容易讓人理解，但圖片相較純字下較為主視覺，文字不若明顯容易被忽略。
~~因為我不小心滑過第二步驟...直到全部做完發現異常，才返回再看一次...~~
2. 是否在開頭先註明，mac和windows的差異性?可以讓使用者先知道自己為哪個環境的注意事項。
3. 在**部署網頁到 GitHub Pages**的五個指令，是否能標註若在重複執行master佈署時，只需要哪幾個指令順序即可?(看到老師的影片內有，想說文件是不是可以同步?)

### 3.看完影片覺得還是有點卡的地方
1. 這個設定，只能用在開發資料夾，放在桌面的時候嗎?我有嘗試在非C碟執行，但好像不行，是不是要先換到另一個磁碟才能執行?
2. 我是分段執行，所以在中斷後，要在開啟會有點問號，不知道要從哪個步驟著手。
3. 還有當全部流程跑完成功後，若重新開啟要先移動到原本建置的資料夾內，在執行gulp指令，是不是能特別點出?~~可能我太菜了...才會有這種蠢事。~~
4. 老師說專案最好分開管理，那網路空間也是一個專案一個網路空間較好嗎?同一個網路空間在進行專案分開管理較不適合?

以上，感謝老師、同學的分享。
## Fleur
### 1.操作時出現預期外的結果
1. windows環境在輸入ctrl+c的時候，會跑出

### 2.建議可以改善文字的細節
1. 在文檔裡有git commit -m “first commit”雙引號的問題
2. 執行完 git push -u origin master 時，系統可能會問你要選擇 1. Web Browser 2. Personal access token 供使用者選擇，還請選擇 1
要不要直接把這兩段放入影片操作的下方呢?如果遇到問題是比較直覺式的能自主糾錯
### 3.看完影片覺得還是有點卡的地方
1. 照著影片輸入指令滿容易出錯的，一勞永逸的方式是文檔複製貼上
只單純看影片卡了好久，是影片+文檔一起看才成功部署到GitHub上 (當然也有可能是我比較笨QQ
2. 不能分段執行。我是分段執行影片，操作出來的結果跟影片完全不一樣，最後是資料夾刪除重新下載並一鼓作氣程序重跑才成功部署

## yellamoon 回報
### 1.操作時出現預期外的結果
1. mac 環境，我是使用黑蘋果 macOS High Sierra 10.13.6 ,
2. 我一開始點開，選了第一個進入Hombrew 頁面複製了
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" 出現這樣的結果
3. 我在node 安裝上選擇了v14.17.2 lts.的版本。
於是我打入noed -v 有出現 v14.17.2 的字樣。表示我安裝成功。
皆折我運行 npm i gulp@4 -g
出現了類似版本不合的狀況 The operation was rejected by your operating system.

接著 我 輸入 gulp -v
出現了-bash: gulp: command not found
如圖，抱歉老師我卡在這裡，
4.我回去看Hombrew的系統要求，我不符合。但我是黑蘋果不能升級。
5.於是開始嘗試安裝x code。尋找著符合我的系統的x code。
https://developer.apple.com/download/all/?q=Xcode
我在這裡找到舊版本
Command Line Tools (OS X 10.10) for Xcode 
但無法運作command line tools 這個軟體。
。
經過老師教導後，在安裝的步驟，
正確方法：
要打 sudo npm install gulp@4 -g
step.5 輸入指令npm install安裝插件 出現奇怪的狀況
步驟六：輸入指令 gulp 執行
再來出現奇怪的狀況：
### h3換了另一台 白mac筆電 macOS10.14.5
後來我換了一台電腦mac 10.14.5的版本 安裝就順利到了下個步驟。
### 2.建議可以改善文字的細節
步驟五：如果mac用戶輸入指令 sudo npm install 安裝插件

GitHub pages
[yella moon巫樾](https://kolyfish.github.io/test22/)

儲存庫資料
https://github.com/kolyfish/test22/tree/master

### 2.建議可以改善文字的細節
能否在步驟二 寫mac 用戶請打 sudo npm install gulp@4 -g 這一整串指令不要分開打成兩個指令sudo 執行
再打npm install gulp@4 -g

## Tansy回報 （Mac User)
* [GitHub Pages 練習網站網址](https://subarashii-huch09.github.io/Gulp-Test-/)

不好意思，遲來的測試回報 >.<
### 1.操作時出現預期外的結果
在一開始執行步驟二：在終端機安裝 gulp，繼續輸入指令 npm i gulp@4 -g，我無法成功安裝，因為畫面顯示 eaccess denied。終端機要求我更換權限，後來上google找答案，看到很多答案譬如加上 sudo ，更換local directory名稱或者是ownership，但是這些越看越不清楚＠＠，後來再回到安裝流程檔案，然後往下滑到Ｑ＆Ａ時才看到，原來有這題的解答XD
除了這裡卡關之外，其他都跟得上安裝教學內容。
### 2.建議可以改善文字的細節
能否在步驟二的下面加上Q&A連結：）
### 3.看完影片覺得還是有點卡的地方
看完影片後，再參考安裝流程教學，可以順利完成。但是我還是要再回想一下流程步驟，我可能要畫個流程圖flow chart（視覺化），才能更了解這個時候需要做這個步驟以及原因。另外還需要再了解gulp deploy
## Jeff H (Mac 使用者)
* [GitHub Pages 練習網站網址](https://jeff14994.github.io/gulp-project/)
* [程式碼](https://github.com/jeff14994/gulp-project/tree/gh-pages)

### 1.操作時出現預期外的結果
* 整體操作蠻順的
* 但我是用 `git clone` 下載專案，中間會遇到 push 不上去的問題。稍微 debug 一下發現原因是：remote 端是在 hexschool 的 repo，而非自己的 repo ，因此會有權限的問題。我的解法是：`git remote set-url origin https://github.com/[自己的 username]/[自己創的 repo]` 改掉 remote 端的 endpoint 即可 push 上去。
### 2.建議可以改善文字的細節
* HackMD 寫的非常詳細
### 3.看完影片覺得還是有點卡的地方
* 基本上沒看影片，照著 HackMD 就可以成功部署了