架設簡易開發用的WEB SERVER

如何透過gulp架設一個web server?

如果您只是單純想建立一個WEB SERVER來開發您手上的前端頁面,不見得要大費周章架設IIS,現在可以利用gulp就可輕鬆辦到。

假設您的專案路徑在c:\testgulp,開啟命令提示字元,並於c:\testgulp目錄夾下執行下面指令

  1. npm init
    目的:產生package.json
  2. npm install gulp-cli g
    目的:告訴這台電腦要使用gulp
  3. npm install gulp --save
    目的:告訴這個目錄夾(專案)要使用gulp模組  (產生gulpfile.js)
  4. npm install gulp-webserver --save
    目的:安裝這個專案要使用gulp-webserver 模組
  5. gulp webserver 
    目的:啟動 web server。啟動前,請新增gulpfile.js檔案於c:\testgulp\ 專案目錄下。內容如下:
    var gulp = require('gulp');
    var webserver = require('gulp-webserver');
     
    gulp.task('webserver', function() {
      gulp.src('.')
        .pipe(webserver({
          livereload: true,
          directoryListing: true,
          open: true,
          port:10
        }));
    });

     

啟動後的命令提示字元畫面如下:

web server啟動後,會自動彈出瀏覽器畫面如下:

[教學影片]

(本篇結束)