(1) Gulp-介紹與安裝

Gulp 是什麼

在以前做網頁開發時，可能只需要處理html、css、js檔案就可以了。但現在前端開發工具越來越多，像css有scss的預處理器、html可以用pug來寫等等。此時就須要一個工具來將這些scss、pug檔案編譯成css跟html。
Gulp 就可以用來編譯 Sass、編譯 JavaScript 語法至相容性較高的 ES5、圖片優化壓縮、打包程式碼等等的事情，讓開發者可以專注於開發。

安裝流程

安裝node.js與npm

首先我們需要要先安裝 nodejs，我們選擇穩定版(LTS)來安裝，安裝過程就不再贅述。

安裝好後，到vscode編輯器，輸入下列指令來確認是否安裝完成。

npm -v   
node -v

若有正確安裝，會顯示版本號。

安裝全域的 Gulp

在commend line輸入

npm install gulp -g  //windows系統
sudo npm install gulp -g //Mac系統

npm安裝套件分為全域與專案安裝，全域安裝只需安裝一次即可。

安裝專案的Gulp

我們先用vscode開一個新的資料夾作為這次專案使用。

先在commend line 輸入

npm init

輸入完後，會新增一個package.json檔案，這個檔案會用來管理這個專案的套件。

之後輸入下面指令來安裝專案內的gulp

npm install gulp --save

安裝完成後輸入下面指令檢查一下，有正確安裝會顯示版本。

gulp -v

結語

到這邊就完成專案內gulp的安裝，下一堂課會帶大家新增一個gulp file，做一些好玩的功能囉。