---
tags: 切版直播班 - 2021 秋季班
---

# **Gulp debug 心得**

## 原因:
因為gulp卡關多天，也尋求洧杰老師和觀看網路上許多資源，
想分享自己遇到的問題點與解決方法

<br>

### [Bug - 1] 圖片路徑選取錯誤 (必須選取相對定位)
>**gulp 環境**


<br>

>**vscode 開發模式** (因為選取到dist的資料夾裡image檔案)


<br>

**解決方式:**
> 把ray助教github的gulp的[資料夾](https://github.com/jimmyFang-ai/week4-gulp-scssv)，下載下來並重新gulp建置環境並將圖片選取正確的**相對路逕**，即可以正常運行專案。
為何會這麼麻煩，要重新建置環境，因為重新爬slack同學遇到運行gulp環境問題時的發文時，**洧杰老師**有提到要先分清楚是**環境**是**程式碼**的問題。

**相對路逕**與**絕對路逕:** ( 資源分享:[ IT邦幫忙的好想工作室文章](https://ithelp.ithome.com.tw/articles/10219156))
>**相對路徑**: 是相對於現在所在的目錄(也就是所在的檔案夾)，通常我們都是以該 **html檔所在的位置為起點**，來**讀取以它為基準的相對位置**。
<br>
>**絕對路逕**: 是把**檔案所在的路徑固定住**，它**無法隨著檔案位置的變換而改變靈活改變路徑讀取**。

<br>


<hr>

### [Bug - 2] 建立scss檔分支時，要加上(" _ " )下引線

>**gulp 環境**


<br>

>**vscode 開發模式** (資源分享: [六角學院網頁切版班-拆分篇@import: 章節 截圖](https://i.imgur.com/joOHKHX.jpg))
>(沒加上**下引線**，gulp會自動編譯新的scss檔到dist資料夾內style資料夾 [示意圖](https://i.imgur.com/qde73G7.png))


**解決方式:**
> 在每支分支的scss檔前先加上下引線，再匯入到all.scss檔案，即可正確運行gulp環境<br>
<hr>

### 分享找出問題流程和除錯規劃:
>1.先把問題點用清單列表:
- [X] gulp 問題清單
- [X] img 圖擋路逕出錯
- [X] scss 檔案無法正常編譯
- [X] 看不懂的程式碼 eperm: operation not permitted, mkdir
<br>
>2.找出解出解決辦法:
- [X] 除錯資源清單
- [X] google 找資料
- [X] 六角影音課程
- [X] slack同學發問和老師求救的歷史訊息
- [X] 求救洧杰老師及助教

<br>

## 最後除錯成功的關鍵:
求救洧杰老師中，老師給了滿多資源，最後從六角影音課程(真心覺得很厲害)和
slack同學發問和老師求救的歷史訊息找到答案