🎞️ Gulp 流程操作說明影片

使用 Gulp 編譯的專案直接 push 上 GIthub 是無法直接開啟 Github pages 的,請依照下方步驟操作。

Gulp 流程操作說明

STEP1. 以 VS Code 開啟專案,並於下方終端機做此專案的版本控制。

  • 資料夾內的 .gitignore 已含有不要上傳到 GitHub 的檔案囉 !
$ git init //此專案做版本控制
$ git add . //所有檔案加入到索引
$ git commit -m"自訂文字 "

$ git remote add origin [GitHub Repositories Url]
$ git branch -M main
$ git push -u origin main

$ gulp deploy

//如果檔案已上傳github,本地端新增或修改資料要再上傳 github 
//如果本地端檔案已刪,直接 clone 下來進行修改後再做以下指令
$ git add . 
$ git commit -m"自訂文字"
$ gulp build
$ git push origin main //傳到 main分支更新
$ gulp deploy   //傳到gh-pages分支更新

Gulp 編譯的專案上傳至 Github 流程_1

STEP2. 執行 gulp deploy

  • 使用 gulp deploy 原因 :
    • git push 是將 Gulp 原始碼上傳到 Git 與 gulp deploy 是不同行為,gulp deploy 是將編譯後的檔案 ( dist ) 上傳到 GitHub Pages。
    • 以往手動上傳 dist 資料夾相對複雜,必須將 dist 獨立加入版本控制並切換等等,而 gulp 就是幫你省下這一段複雜過程。
  1. 完成步驟一,專案上傳到 GitHub 上後,GitHub Pages 是無法開啟頁面的,需再另外執行。
  2. 回到 VSCode ,gulp 編譯的檔案都會在專案內的 dist 資料夾內。於終端機執行 gulp deploy ,此指令會將 dist 資料夾部署 ( 上傳 ) 至 GitHub Pages 。
  3. 回到 GitHub 的 GitHub Pages 上,Source 請指向 gh-pages 分支與 /root 資料夾。另外上方的網址為藍色背景時,表示網頁還在準備中。綠色背景表示已準備好囉 !

Gulp 編譯的專案上傳至 Github 流程_2

// 圖片來源 : 六角學院 ▲

註 : 如果是 git clone 六角提供的資料夾下來做專案開發,記得要先移除原本的 .git 資料夾。

註 : 瀏覽器強制跳轉 HTTPS 網址怎麼辦 ?

註 : 六角教學影片

資料來源

六角學院 :

最後修改日期: 28 12 月, 2020

作者