小弟前几天刚上传的小插件,欢迎大家批判性的试用
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']);
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)]; } }); });
{ "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之间的数组.