【Gulp】gulp和JsonSever结合模拟数据

最新推荐文章于 2021-06-21 00:10:18 发布

遥寄三山

最新推荐文章于 2021-06-21 00:10:18 发布

阅读量920

点赞数

分类专栏： ●前端文章标签： gulp和JsonSever结合模拟数据

本文链接：https://blog.csdn.net/sds15732622190/article/details/53858313

版权

●前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

前言

本来呢？研究这个课题的目的是让gulp自动返回模拟的后台数据，但是还没有做出来，仅仅出来个中间效果，告别F5时代的HTML页。

gulpfile.js

'use strict';
var gulp = require('gulp'),
    less = require('gulp-less'),
    connect = require('gulp-connect'),
    port = 5000;//访问的端口
var rename = require('gulp-rename');
var plumber = require('gulp-plumber'); // 错误处理插件
var notify = require('gulp-notify'); // 消息插件
var autoprefixer = require('gulp-autoprefixer'); // 自动添加前缀
var minifycss = require('gulp-minify-css');
var proxy = require('http-proxy-middleware');
gulp.task('server',function(){
    connect.server({
        root:[__dirname],
        port:port,
        livereload:true,
        middleware:function(connect, opt){
            return [
                proxy('/api', {// configure proxy middleware
                    // context: '/' will proxy all requests
                    // use: '/api' to proxy request when path starts with '/api'
                    target: 'http://localhost:3000',
                    changeOrigin:true    // for vhosted sites, changes host header to match to target's host
                })
            ];
        }
    });
});
gulp.task('reload',function(){
    gulp.src(['./index.html', './less/style.less'])
        .pipe(connect.reload());
});

gulp.task('default',['server'],function(){
    gulp.watch(['./index.html'],['reload']);
});

HTML页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="http://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
</head>
<body>
<h1>gulp</h1>
<script>
    // $.get('api/profile',function(re){
    //     console.log(re);
    // })
    $.post("api/posts",{suggest:'xx'},function(re){
        console.log(re);
    });
</script>
</body>
</html>

db.json

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}