讓專案使用 Gulp 自動化編譯


Posted by hoyi-23 on 2021-07-19

快速瀏覽步驟

如果之前已經有再全域下載過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

插件 用途
gulp-htmlmin 壓縮 HTML
gulp-clean-css 壓縮 CSS
gulp-uglify 壓縮 javascript
gulp-imagemin 壓縮圖片
gulp-concat 合併多個檔案
browser-sync 瀏覽器同步檢視
gulp-ejs 動態生出html

插件用法

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

Gulp Task常見任務

以前的寫法:

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

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

指令 解釋
gulp.task() 定義任務,可自訂名稱
gulp.src() 檔案來源
gulp.dest() 處理後的檔案輸出位置
gulp.pipe() 串流來源檔案到另個外掛
gulp.watch () 監控任務,當檔案有更動時,便會執行相對應的任務

#gulp #Github







Related Posts

Day 3 CLT & Homebrew

Day 3 CLT & Homebrew

Chapter 1 網路評估

Chapter 1 網路評估

Day04 git 知己知彼

Day04 git 知己知彼


Comments