哈囉 ! 開發者

假設您的專案路徑在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啟動後，會自動彈出瀏覽器畫面如下：

[教學影片]

(本篇結束)