gulp-mock， gulp 下的 mock 插件

[DaniloSam]

小弟前几天刚上传的小插件，欢迎大家批判性的试用

npm

github

gulp-mock

Gulp mock 插件 (模拟数据，测试用).

安装

npm install --save-dev gulp-mock

用法

所有 mock 模版 必须 放在 source 路径中.

所有生成的数据会被放入 api 路径中.

必须指定 apiPath, sourcePath, dirName 这三个变量.

// in gulpfile.js
var gulp = require('gulp'),
    connect = require('gulp-connect'),
    mock = require('gulp-mock');

const sourcePath = 'source';
const apiPath = 'api';

mock.config({
    sourcePath: sourcePath, // Mock template should put here. e.g: source/path/to/foo.json
    apiPath: apiPath, // Mocked files would be this path. e.g: api/path/to/foo.json
    dirName: __dirname
});

gulp.task('api', function () {
    gulp.src(sourcePath + 'path/to/*.json')
        .pipe(mock()) // Just add this line to what ever files you wanna mocked.
        .pipe(gulp.dest(apiPath + 'path/to/'))
        .pipe(connect.reload())
});

gulp.task('default', ['api', 'server', 'watch']);

需要livereload和JSONP?

Gulp-mock 使用 middleware 来处理livereload和JSONP请求.

gulp.task('watch', function () {
    gulp.watch('source/**/*.json', ['api']);
});

gulp.task('server', function () {
    connect.server({
        port: 3000,
        livereload: true,
        middleware: function (connect, opt) {
            // Just add this line in middleware. Then you'll get jsonp support and live load.
            return [mock.middleware(connect, opt)];
        }
    });
});

Mock 模版

{
  "data|2-10": {
    "code": "String:7",
    "percent": "String:7",
    "tels|2-5": "Number:13|x.xxxxxxxxxxxxxxx",
    "array|5-10": "String:7-12",
    "time": "Date|YYYY-MM-DD",
    "String:4|2-5": {
      "name": "String:7|xxx.xxxx",
      "time": "String:7",
      "String:2-5": "Number:10"
    },
    "avatar": "Image|200x200",
    "thumbnails|2-5": "Image|200x300-400x500"
  }
}

mock 后的数据如下:

时间的 filter 使用 momment.js, see docs

{
  data: [{ // "data|2-10" Should return a array, the array's length should within 2 to 10
    code: "byother", // "String:7" Should return a string, the string's length should equal to 7.
    percent: "upinstr",
    tels: [
      7.558816198259, // "Number:13|x.xxxxxxxxxxxxxxx" Should return a number and transformed like 'x.xxxxxxxxxxxxxxx'.
      4.997925737872,
      4.765942785888
    ],
    array: [
      "oeverymajo", // "String:7-12" Should return a string, the string's length should within 7 to 12.
      "utplaysnbson",
      "lationabo",
      "actorso",
      "terandp",
      "nisedassha",
      "rtainhispla",
      "ainhigh"
    ],
    time: "2015-01-23",
    onal: [ // Random key name, in case sometime we need that.
      {
        name: "the.grea", // "String:7|xxx.xxxx" Just work.
        time: "reemine",
        dt: 3782816532
      },
      {
        name: "sus.anna",
        time: "tilabou",
        tth: 5975610705
      },
      {
        name: "ces.andc",
        time: "ndbroug",
        lon: 2345818821
      },
      {
        name: "rig.htsh",
        time: "eoftheb",
        clu: 6192378209
      },
      {
        name: "few.reco",
        time: "olarshi",
        hts: 4497031601
      }
    ],
    avatar: "data:image/png;base64,iVBORw0KGg...", // "Image|200x200" Canvas Image, with 200px width and 200px height.
    thumbnails: [
      "data:image/png;base64,iVBORw0KGg...", // "Image|200x300-400x500" Canvas Image, with 200px to 300px  width and 400px to 500px height.
      "data:image/png;base64,iVBORw0KGg...",
      "data:image/png;base64,iVBORw0KGg...",
      "data:image/png;base64,iVBORwAADM...",
      "data:image/png;base64,iVBORw0KGg..."
    ]
  }] // and more
}

同样可以使用如下方式直接返回数组:

[{
  "data": "..."
}, "2-5"]

其会返回一个数组，长度介于2和5之间.
你也可以省略 "2-5"，会直接返回一个默认长度介于1到20之间的数组.