Gulp 4 介紹及安裝

什麼是 Gulp

• Gulp是Nodejs的自動任務執行器
• Gulp是前端開發的建構工具
  • 將 Pug 轉為 Html
  • 將 Sass 轉為 CSS
  • 檔案合併
  • JS檔壓縮
  • 圖片壓縮
  • 監聽檔案異動
  • 測試

安裝 Gulp

1. 如果曾安裝舊版的 Gulp 到全域環境中，需要先移除

npm rm --global gulp

2. 確認npm及nxp版本

npm --version
nxp --version

3. 用npm安裝 Gulp指令集

npm install --global gulp-cli

4. 建立專案目錄

npx mkdirp my-project
cd mp-project

5. 建立package.json

npm init

6. 安裝本地 Gulp

npm install --save-dev gulp

7. 檢查 Gulp版本

gulp --version

設定任務

• 新增檔案 gulpfile.js

function defaultTask(cb) {
  // place code for your default task here
  cb();
}

exports.default = defaultTask

執行

• 在終端機裡到切到 gulpfile.js所在的目錄
• 執行 gulp

gulp

• 開發時一般會設定一個watch的任務

gulp watch

Gulp 的API

• gulp.task(name, fn)
  • 定義一個任務名稱，指定任務的工作內容
• gulp.run(task)
  • 執行指定的任務
• gulp.src(glob)
  • 指定要輸入(處理)的檔案路徑
  • 來源
• gulp.dest(folder)
  • 指定要輸出的檔案路徑
  • 目的地
• Gulp.watch(glob,tasks)
  • 監聽檔案，並在異動時執行指定任務

基本的 Gulp 專案結構

專案根目錄/
└─ node_modules/
└─ public/          # 目的地資料夾
│   └─ index.html   
└─ source/          # 來源資料夾
│   └─ index.pug
└─ gulpfile.js

常用的模組

• gulp-concat : 合併檔案(js/css)
• gulp-uglify : 壓縮JS檔案
• gulp-rename : 檔案重新命名
• gulp-less : 編譯less
• gulp-clean-css : 壓縮css
• gulp-livereload : 即時自動編譯及更新

參考

• Gulp JS(CN)
• Anna Su - 入門Gulp-前端自動化開發工具