前言
在前端项目开发中，我们经常需要构建工具来帮助我们自动化处理一些任务，例如打包、压缩、转译等等。而 gulp 作为一款流式构建工具，越来越受到前端开发者的关注。
有时候我们的前端项目需要与后端进行数据交互，而不想在开发环境中启动后端服务，这时候 gulp-json-server 就是一个方便的解决方案。它是一个基于 Node.js 的简单 JSON 服务器，可以模拟 RESTful API。而在这篇文章中，我们将介绍它的升级版 gulp-json-srv-forked 的使用方法。
什么是 gulp-json-srv-forked？
gulp-json-srv-forked 是一个基于 gulp-json-server 的升级版。相较于原版，它添加了以下特性：
- 支持空响应。
- 支持动态数据生成。
- 支持跨域请求。
- 修复一些原版的 bug。
gulp-json-srv-forked 可以让我们更加自由地模拟后端 API，进行前端开发。
安装
我们可以通过 npm 来安装该 npm 包：
npm install gulp-json-srv-forked --save-dev
基础使用
创建 gulpfile.js
首先，我们需要在项目根目录创建一个名为 gulpfile.js 的文件，用于编写 gulp 任务。
const gulp = require('gulp');
const jsonSrv = require('gulp-json-srv-forked');
gulp.task('serve-data', function () {
gulp.src('./data/**/*.json')
.pipe(jsonSrv())
.pipe(gulp.dest('./output/data'));
});代码中，我们使用了 gulp-json-srv-forked 模块，创建了一个名为 serve-data 的 gulp 任务，用于启动 JSON server 并提供数据服务。
创建数据文件
在项目中，我们需要定义一些 JSON 文件表示数据，通常可以放在一个名为 data 的目录下。以 data/employees.json 文件为例:
-- -------------------- ---- -------
-
------------ -
-
----- --
------- ------ --------
----------- --------------
--
-
----- --
------- ----- ---- --------
----------- -------
-
-
-运行任务
在项目根目录执行以下命令，启动 JSON server 并提供数据服务：
gulp serve-data
此时，在 http://localhost:3000 访问即可看到模拟的 API。
高级使用
修改默认端口
默认情况下，gulp-json-srv-forked 会在 http://localhost:3000 上启动服务。如果我们需要修改服务端口，只需添加一个 port 选项即可。
const gulp = require('gulp');
const jsonSrv = require('gulp-json-srv-forked');
gulp.task('serve-data', function () {
gulp.src('./data/**/*.json')
.pipe(jsonSrv({ port: 4000 }))
.pipe(gulp.dest('./output/data'));
});这里我们将服务端口修改为 4000。
动态数据生成
有时候，我们需要动态生成数据，而不是从静态文件中读取。这时可以使用 gulp-json-srv-forked 提供的回调函数，生成任意格式的数据。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------------------
----------------------- -------- -- -
----------------------------
---------------
----- -----
------------ -------- -- -
------ -
------ -
- ------ ----------- ----- ----- ------------- --
- ------ ---- ----------- ----- ----- ------------- -
-
-
-
---
----------------------------------
---这里我们通过 dynamicData 选项，返回了一些动态生成的数据。
支持空响应
有时候，我们的前端页面需要进行一些操作后，不需要后端返回数据，这时候可以使用空响应功能。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------------------
----------------------- -------- -- -
----------------------------
---------------
----- -----
------------- ----
---
----------------------------------
---这里我们通过 emptyRespond 选项设置为 true，就可以让 gulp-json-srv-forked 返回空响应了。
支持跨域请求
通常我们的项目中可能需要与另外一个域名下的数据进行交互，此时 Cross-Origin Resource Sharing（CORS）是必要的。因此，我们可以设置 crossDomain 选项来允许请求来自跨域的来源。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------------------
----------------------- -------- -- -
----------------------------
---------------
----- -----
------------ ----
---
----------------------------------
---配置文件
在实际项目中，我们可能需要针对不同的环境和数据进行不同的配置。此时，我们可以创建一个 json-srv.json 的配置文件，设置不同的选项。例如：
-- -------------------- ---- -------
-
-------------- -
------- -----
--------------- ------
-------------- ----
--
------- -
------- -----
--------------- ----
-
-然后在 gulpfile.js 中引入配置文件，并使用对应的配置。
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - --------------------------------
----- ------ - ---------------------------
----------------------- -------- -- -
----------------------------
----------------------------------
----------------------------------
---总结
gulp-json-srv-forked 是一个非常便捷的 JSON 数据模拟服务工具，能够支持动态生成数据、空响应、跨域请求等多种功能，并提供配置文件进行不同环境和数据的配置。在前端项目开发中使用它，可以让前端开发者更加高效地进行开发工作。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005597d81e8991b448d70ab