讓專案使用 Gulp 自動化編譯

快速瀏覽步驟

如果之前已經有再全域下載過gulp，想要完全跟著下面的步驟走的話，需要先輸入 npm rm --global gulp把之前的刪掉，讓我們再重新跑一次吧!

步驟一: 要先載入 npm & node.js & npx

node -v npm -v npx -v 來查看是否下載成功與版本

若還沒有下載可以先到node官網下載(下載node會一併下載npm)
接下來可以再使用指令 npm install -g npx 來下載 npx

延伸閱讀: npm 和 npx 的差別

步驟二: 在終端機輸入指令載入gulp

輸入 npm install -g gulp-cli 全域載入，為了讓之後電腦上所有專案都可以直接使用指令執行gulp。

步驟三: 建立專案資料夾

輸入 npx mkdir my-project
輸入 cd my-project //前往資料夾

步驟四: 在專案內建立 package.json file

輸入 npm init
並輸入一些專案資料。
你可以參考這篇文章 - NPM & Node.js & Package.json的關係與使用

步驟五: 在開發環境中下載gulp

npm install --save-dev gulp
gulp --version 會出現 CLI version 和 Local version

載入 gulp 其實要分為兩個步驟，第一個就是全域載入 gulp-cli，為了讓之後可以執行 gulp command 。 但是在Local project(本地專案)中，還是需要在載入一次 gulp，才能正確執行 gulpfile

步驟六: 載入需要的 npm 套件

再開始執行 gulp 並撰寫網頁前，其實還有很多前置步驟。

步驟七: 撰寫 gulpfile.js

gulpfile.js 的用途就是來告訴 gulp 要如何幫助我們，我們要寫出gulp task(gulp 需要執行的任務，例如: 監聽儲存後編譯等等)

步驟八: 部屬到github

git init - 若已經初始化過就可以不用輸入。
git add .
git commit -m 'first commit'
git remote add origin [GitHub Repositories Url]
git push -u origin master // 僅限第一次輸入，往後只需要輸入 git push

步驟九:下指令執行 gulp 並開始撰寫網頁

結束gulp的方式 - ctrl+C

步驟十: 更新至github

將修改部署到 gh-pages

gulp build - 執行編譯模式(不會開啟瀏覽器)
gulp deploy - 將 dist 資料夾部署至 GitHub Pages

需要再修改master/main

git add .
git commit -m "commit name"
git push -u origin master(/main)

Gulp 常見插件

參考官方文件: https://gulpjs.com/plugins

插件用法

載入後，寫入gulpfile.json，再執行。

Gulp Task常見任務

以前的寫法:

gulp.task('taskName',function(){
});

現在好像有改成直接寫出function，再使用export