前言
在前端开发过程中，我们经常需要建立一些数据接口来完成前后端的交互。有时候手动模拟数据非常耗时费力，因此一些第三方工具应运而生，比如 json-server。它可以快速地搭建一个 mock 接口，但是它需要自己写一个 json 文件作为数据源。如果在前端做接口开发，这种方式显然没办法适用，所以今天介绍一种基于 gulp 的 mock 接口工具 —— gulp-json-srv。
使用方法
- 首先，安装
gulp-json-srv，可以通过 npm 包管理器进行：
npm install gulp-json-srv --save-dev
- 在
gulpfile.js文件中引用它，与其他插件一样：
const jsonServer = require('gulp-json-srv');
- 接下来，在 gulp 任务中配置
gulp-json-srv：
-- -------------------- ---- ------- ------------------------ -- -- - ------ --------------------------- ------------------ ----- ----- ------ - ------- ------- - ---- ---展开代码
其中，port 为端口号。hosts 可以指定多个接口路由到不同的数据源目录。
- 将相应的数据源存放到指定目录下：
. ├── api │ └── blog │ ├── list.json │ └── users.json └── mock-data └── blog.js
- 最后，在 gulp 中调用该任务即可启动 mock 接口服务：
gulp json-server
指导意义
gulp-json-srv 可以快速地启动 mock 接口服务，为前端开发节省了模拟接口数据的时间。并且，由于它是基于 gulp 的，因此拓展性很强。比如，我们可以使用 gulp-concat，通过拼接多个数据源文件来模拟接口的列表页和详情页的切换。又或者，我们可以使用 gulp-watch，当 mock 数据文件发生变化时自动重载服务。
示例代码
mock-data/blog.js
module.exports = function () { return { users: [ {id: 1, name: 'foo'}, {id: 2, name: 'bar'} ] }; };
gulpfile.js
-- -------------------- ---- ------- ----- ---- - ---------------- ----- ------ - ----------------------- ----- ---------- - ------------------------- ----- ----- - ---------------------- ------------------------ -- -- - ------ --------------------------- ------------------ ----- ----- ------ - ------- ------- - ---- --- ----------------- -- -- - ------ --------------------------- ------------------------- ----------------------------- --- ------------------ -- -- - ------------------------ --------------------- --- ---------------- -------------------------- ----------展开代码
上面的示例中，我们在 mock-data/blog.js 中定义了一个用户列表数据，然后通过 gulp-concat 插件将多个数据文件合并成一个文件，最后存放到 api/blog 目录下。
为了能够实时更新 mock 数据，我们还可以使用 gulp-watch 监听文件变化，实时调用 mock 服务。最终，我们将启动 mock 服务和文件监听任务整个到一个任务 dev 中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5eedb5d5b5cbfe1ea061147c
