Node.js:Gulp 運行 gulp-connect 套件,建立前端開發伺服器(Gulp 大展身手!)

2019/03/25 584 0 網站技術 , 伺服器 , 學業筆記 , JavaScript , Node.js , Gulp

《上一篇:Node.js:Yarn 專案初始化、gulp.js 任務管理工具安裝與使用》已經成功將 Gulp 任務管理工具安裝完成,也能運作了!接著我們要運用 Yarn 這款套件管理程式來安裝 Gulp 的套件「gulp-connect」,安裝完後再撰寫「gulpfile.js(Gulp 的工作流程檔)」,指定運行前端開發伺服器,未來只要在終端機(命令提示字元)「gulp」指令,就會運行前端開發伺服器啦!

運用同理,您可以到 npm 官方網站尋找想要使用的套件,再運用 npm 或 Yarn (推薦,本篇使用這個)這樣的套件管理程式來安裝該套件,安裝後只要運用 Gulp 任務管理工具的「gulpfile.js」編寫相關工作流程,最終就可以用它來開始工作,如:開始壓縮圖片、CSS 等。

接著我就用圖文來解釋我第一段敘述的過程啦!
※ 跟上篇一樣,請準備好 IDE(推薦:VS Code)與終端機(命令提示字元),還要將終端機指向專案目錄,我是用 cd 指令進入目錄的。
▲  跟著上圖的數字順序操作:
【1】終端機在專案目錄下輸入指令yarn add gulp-connect,接著就會開始自動安裝 gulp-connect 套件。
【2】最後會顯示 Done 與執行時間,看到這個代表套件安裝完成。
【3】打開專案目錄下的「package.json」會看到多了:

"dependencies": {
    "gulp-connect": "^5.7.0"
  }

這邊將記錄您要使用的套件與其版本,「^」代表不會自動更新第一個數字變動的大版本更新,後面兩個數字變動的微型更新就會自動做更新啦!您當然也可以手動在「package.json」內輸入套件名稱與其版本,再到終端機下指令yarn安裝套件,可以一次下載多個套件!

▲ 接著要來建立「gulpfile.js(Gulp 的工作流程檔)」啦!請先在專案目錄新增 gulpfile.js 並使用 IDE (本篇統一使用 VS Code)開啟它,開始編輯啦!跟著上圖的數字順序操作:
【1】編輯 gulpfile.js,原始碼如下(備註有說明):

//  套件定義
//  在 package.json 內引用的套件

const gulp = require('gulp');
const connect = require('gulp-connect');

// 建構工作

const webServer = async function() {
    console.log('reload');
    connect.server()
}

// 輸出工作

exports.default = gulp.series(webServer);

這樣工作流程內就已經加入開啟伺服器這個工作啦!簡單說一下 gulpfile.js 內分三個主要區段:套件定義(將套件指定給變數)、建構工作(工作內容)、輸出工作(要做哪些工作內容)。完成後記得存檔。
【2】回到終端機,下指令gulp就可以開啟前端開發伺服器啦!預設通訊埠(Port)為 8080。
【3】打開瀏覽器進入「http://127.0.0.1:8080/」就可以進入伺服器瀏覽資源囉!

▲ 繼續跟著上圖的數字順序操作:
【1】終端機上點鍵盤 Ctrl + C 關閉伺服器,接著會問是否停止批次工作,輸入「y」後按鍵盤 Enter 結束工作。
【2】一般來說都會想要改通訊埠(Port),這邊示範將預設的 8080 改成 8888,回到 gulpfile.js,打開它並編輯,在建構工作區的「connect.server」新增程式碼即完成修改!程式碼如下(修改後記得存檔):

// 建構工作
const webServer = async function() {
    console.log('reload');
    connect.server({
        port: 8888
      })
}

【3】回到終端機,再次輸入gulp跑工作流程,並開啟前端開發伺服器,這時候您會發現通訊埠(Port)已經修改成 8888。
【4】使用瀏覽器就能用「http://127.0.0.1:8888/」進入伺服器查看資源(網頁檔案)啦!

之後會再介紹更多 Gulp 的功能,並且介紹更多套件,讓前端更加美好!😊 我們下一篇文章見!

《下一篇:Node.js:Gulp 運行 imagemin-mozjpeg,mozjpeg 批次圖片壓縮》

Node.js 系列教學文章

贊助廣告 ‧ Sponsor advertisements

留言區 / Comments

萌芽論壇