gulp插件之gulp-mock-server

　　本文講gulp-mock-server的應用，用於虛擬一個服務器，模擬後臺返回json數據給前端，這樣能夠必定程度上實現先後端分離，約定好接口以後，先後端便可同時開發，從而提升效率。

　　在gulpfile裏新建任務：

//mock server
gulp.task('mock', function() {
  gulp.src('.')
    .pipe(g.mockServer({
      port: 8090
    }));
});

　　在項目根目錄下新建data文件夾，裏面放json文件。舉個栗子，咱們在data裏放了test.json文件。那麼在瀏覽器裏訪問http://localhost:8090/test便可看到test.json的數據，如此咱們ajax請求該連接，一樣能夠獲得數據。

　　項目目錄以下：

　　訪問mock-server效果以下：

　　下面示例如何經過ajax請求數據。

$(function () {
    $.get('http://localhost:8090/test', function (data) {
        console.log(data);
    });
});

　　因而咱們在瀏覽器的console裏面看到：

　　說明咱們請求到數據了。

　　可是如今發現一個問題，mock地址是localhost，那其餘設備怎麼訪問呢？因此咱們要配置mosk的host，修改mock任務以下：

//mock server
gulp.task('mock',['browser'], function() {
  gulp.src('.')
    .pipe(g.mockServer({
      port: 8090,
      host: '192.168.2.109'
    }));
});

　　因而咱們看到：

附錄：

一：參考資料

　　一、gulp-mock-server github連接 https://github.com/sanyueyu/gulp-mock-server

　　二、npm 插件之gulp-mock-server  https://www.npmjs.com/package/gulp-mock-server

二：感謝老大cyn的指導。