###### tags: `Tool` # Gulp任務管理器 ## 環境安裝 ### 步驟一 : 安裝[Git](https://git-scm.com/)。 ### 步驟二 : 安裝LTS版本的[Node.js](https://nodejs.org/en/),打開cmd輸入`node -v`查看是否有顯示版本號。 ### 步驟三 : 輸入`npm i gulp@4 -g`安裝gulp後,輸入`gulp -v`查看是否有顯示版本號。 ### 步驟四 : 下載[資料夾](https://github.com/hexschool/web-layout-training-gulp),並解壓縮。 ### 步驟五 : 輸入`cd 資料夾路徑`切換到該資料夾。 ### 步驟六 : 輸入`npm install`安裝package.json裡的插件。 ### 步驟七 : 輸入`gulp`執行。 ### 步驟八 : 執行成功會打開瀏覽器顯示網頁。 ## 部屬網頁到Github Page ``` 建立空間 : New Repostory git config --global user.name "name" git config --global user.email "mail" git init 若已經初始化可以不用輸入 git add . git commit -m "first commit" git remote add origin [GitHub Repositories Url] git push -u origin master 僅第一次輸入,往後只需要輸入 git push ``` 當將 Gulp 原始碼初次部署到 GitHub 之後,可以依照以下兩步驟來更新網站 步驟一:gulp build 進入生產模式 步驟二:當生產完畢之後接下來只需要輸入 gulp deploy 即可完成 GitHub Pages 部署。 ## 此範例所提供的功能 - 使用 EJS 做版型管理 - 支援 SCSS 編譯功能 - 儲存檔案時,瀏覽器會自動更新,不需持續按 F5 - 整合 GitHub 服務,能做到一鍵上傳網站空間