Gulp-Mock-server of the gulp plug-in

This article describes the application of gulp-Mock-server, which is used to virtualize a server and simulate the backend to return JSON data to the front-end. In this way, the frontend and backend can be separated to some extent. After the interface is agreed, both the front and back ends can be developed at the same time to improve efficiency.

Create a task in gulpfile:

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

Create a data folder in the root directory of the project and put the JSON file in it. For example, we put the test. JSON file in data. You can access http: // localhost: 8090/test in the browser to view the data of test. JSON. In this way, you can also obtain data when Ajax requests the link.

The project directory is as follows:

The following figure shows how to access mock-Server:

The following example shows how to request data through Ajax.

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

So we can see in the console of the browser:

It indicates that we have requested data.

But now I found a problem. The mock address is localhost. How can I access other devices? Therefore, we need to configure the Mosk host and modify the mock task as follows:

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

So we can see:

Appendix:

I. References

1. Gulp-Mock-server GitHub link https://github.com/sanyueyu/gulp-mock-server

2. Gulp-Mock-server https://www.npmjs.com/package/gulp-mock-server of NPM plug-in

2: Thanks To Cyn, the boss.

Gulp-Mock-server of the gulp plug-in