---
# System prepended metadata

title: '**Gulp debug  心得**'
tags: [切版直播班 - 2021 秋季班]

---

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


# **Gulp debug  心得**

## 原因:
    因為gulp卡關多天，也尋求洧杰老師和觀看網路上許多資源，
    想分享自己遇到的問題點與解決方法
    
  <br>
  
### [Bug - 1]  圖片路徑選取錯誤 (必須選取相對定位)
  >**gulp 環境** 
  
  ![](https://i.imgur.com/EdsX8tN.png)
  
  <br>
 
 >**vscode 開發模式** (因為選取到dist的資料夾裡image檔案)
 
  ![](https://i.imgur.com/P6sL5UR.png)
 
 <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>
 
 ![](https://i.imgur.com/Pg8rZTr.png)
  
  <hr>
     
   
### [Bug - 2] 建立scss檔分支時，要加上(" _ " )下引線
   
  >**gulp 環境** 
  
  ![](https://i.imgur.com/vBXTBb4.png)
  
  <br>
 
 >**vscode 開發模式**   (資源分享: [六角學院網頁切版班-拆分篇@import: 章節 截圖](https://i.imgur.com/joOHKHX.jpg))
 >(沒加上**下引線**，gulp會自動編譯新的scss檔到dist資料夾內style資料夾 [示意圖](https://i.imgur.com/qde73G7.png))
 
  ![](https://i.imgur.com/Ga8MZny.png)
 
  
  **解決方式:** 
> 在每支分支的scss檔前先加上下引線，再匯入到all.scss檔案，即可正確運行gulp環境<br>
  ![](https://i.imgur.com/scfOJPw.png)
 <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同學發問和老師求救的歷史訊息找到答案