前端自動化神器 Gulp (更新)

最近聽到一句話『每18至24個月,前端都會難一倍』,非常認同啊,我有兩年沒認真的寫前端開發了,概念還停留在JQuery和Bootstrip,這幾年前端技術推陳出新,Polymer、React、ES6.....。人家都已經飛到冥王星,我卻仍在哈瑪星,是時候加把勁精進前端技術了。

這篇要介紹的工具Gulp,是一套前端的任務管理工具,它可以幫助工程師將一些前端檔案的處理做成自動化程序,然後佈署在開發環境,讓前端工程師專注在開發上面,無須費心於環境設定等瑣事。

特色:
  • Gulp的背後是Node.JS,效能非常好
  • 有非常多的擴充套件可供選用,例如可以直接用Gulp當作Web Server,JS、CSS檔案的處理、SASS、LESS檔案的轉換等等,可依前端工程師的需求來安裝與配置
  • 程式修改後不需要重啟或重載,Gulp會自行判斷修改的部分,然後自動重新佈署,並重載瀏覽器
  • 配置非常容易,Gulp沒有GUI介面(如果需要GUI介面,可安裝Gullet,這是 g0v發起人clkao自己開發的小工具),全部的配置只有一個JS檔案(gulpfile.js)

目錄結構

在使用Gulp時,目錄結構非常重要,如果是共同開發的專案,可依團隊需求訂定統一的目錄結構。以下是我習慣使用的目錄結構,僅供參考,專案資料夾下分兩個資料夾src和server,src存放原始碼,任何程式碼異動都改在src的檔案,server資料夾則是存放gulp編譯後的檔案,Gulp配置檔(gulpfile.js)則放在專案資料夾的根目錄下。這樣的好處是,src可以直接進版本控管系統,server則可以直接拿來佈署,若web hosting是GitHub Page的話,甚至可以把server直接推到gh-pages分支。

├── [Project Name]
├──── [src]
├────── [js]
├────── [css]
├────── [img]
├────── index.html
├──── [server]
├────── [js]
├────── [css]
├────── [img]
├────── index.html
├──── gulpfile.js

安裝

  1. 首先要安裝Node.js
  2. 其次安裝全域的Gulp
  3. 最後是依需求安裝Gulp的套件

常用套件 

  • gulp-clean:刪除目的端檔案
  • gulp-connect:網頁伺服器(http://localhost:8080)
  • gulp-livereload:自動刷新頁面
  • gulp-watch:即時監控指定目錄下的檔案是否異動
  • gulp-clean-css:CSS檔案壓縮 
  • gulp-sass:CSS preprocessor,內建CSS檔案壓縮
  • gulp-concat:合併多個檔案
  • gulp-jshint:JavaScript語法檢查   (更新: 新版的gulp-jshint似乎有些問題,建議先不要安裝) 
  • gulp-uglify:JavaScript檔案壓縮
  • gulp-imagemin:圖形檔最佳化
  • gulp-notify:通知
  • gulp-gh-pages:部署到GitHub Pages

Gulpfile.js

下面是Gulpfile的範例程式,應該還算淺顯易懂。需要執行的步驟寫在Task裡面,最後將所有要依順序處理的步驟寫在default task。

執行Gulp

在專案資料夾根目錄執行"gulp"指令,然後從瀏覽器輸入這個網址:http://localhost:8080。執行過程中,因為有安裝gulp-jshint,如果有JavaScript錯誤,會顯示在命令列視窗。

範例

本篇的Gulpfile.js已上傳到GitHub,有興趣的讀者可自行下載修改。

分類:

Copyright © Andy Cheng

Distributed By My Blogger Themes | Blogger Theme By NewBloggerThemes Up ↑