Gulp-安裝&初步使用

Gulp 是一個編譯軟體可以watch做scss編譯以及可以做EJS layout，所以平常寫code就需要打開。

如何安裝與使用gulp呢？

去 Node.js 網站下載，Node.js檔案

打開終端機，輸入：

sudo npm i gulp@4 -g

如果要檢查是否成功請輸入：

gulp -v

使用老師寫好的gulp套件程式碼資料夾，內容有：

1. app資料夾（平常寫程式的地方，內可以分成page、img、js、style等）
2. gulpfile.js資料夾（裡面包含A. envOptions→設定輸出路徑用，所以如果有要換路徑請去裡面改。B. index.js→這是老師先寫好的一些gulp好用function）

再來就是打開終端機，把終端機的注意力放到我們指定資料夾，輸入：

cd /路徑 *請注意上面cd後面有空白 要檢查是否成功請輸入ls，就會帶出目前位置的內容

第一次用這個資料夾請輸入，會產生node_modules資料夾（註2）：

sudo npm install

接著執行gulp，就會產生→dist資料夾（註1）

註1.dist資料夾（輸出檔案的地方，平常盡量不要動它。給後端工程師就是給輸出完成的檔案）

註2.node_modules（插件），千萬記得這個資料夾不要給他上傳到 github。

平常寫code時

就是打開終端機，然後cd到指定資料夾 → 接著輸入gulp就會自動執行上面程序。

在 app 資料夾寫程式，gulp會自動編譯到 dist 中。

而牽動到 layout 和 js 的更新比較麻煩，要中斷請輸入command+c，想再打開就gulp。

跑完就會打開網頁摟！！

以後需要使用時，就是直接複製老師的資料夾去新的資料夾，每次使用新的資料夾，必須記得先打

sudo npm install

補充一點，如果我們是使用 gulp 連結到 github，因為我們如果丟到github上，如果 css 路徑上吃不到，建議把前面的/斜線拿掉，等於說把相對路徑換成絕對路徑比較穩定🤗🤗

相對路徑→絕對路徑

後續會在整理我的起始檔案放上～