gulp插件之gulp-mock-server
本文讲gulp-mock-server的应用,用于虚拟一个服务器,模拟后台返回json数据给前端,这样可以一定程度上实现前后端分离,约定好接口之后,前后端即可同时开发,从而提高效率。
在gulpfile里新建任务:
//mock server
gulp.task('mock', function() {
gulp.src('.')
.pipe(g.mockServer({
port: 8090
}));
});
在项目根目录下新建data文件夹,里面放json文件。举个栗子,我们在data里放了test.json文件。那么在浏览器里访问http://localhost:8090/test即可看到test.json的数据,如此我们ajax请求该链接,同样可以得到数据。
项目目录如下:
访问mock-server效果如下:
下面示例如何通过ajax请求数据。
$(function () {
$.get('http://localhost:8090/test', function (data) {
console.log(data);
});
});
于是我们在浏览器的console里面看到:
说明我们请求到数据了。
但是现在发现一个问题,mock地址是localhost,那其他设备怎么访问呢?所以我们要配置mosk的host,修改mock任务如下:
//mock server
gulp.task('mock',['browser'], function() {
gulp.src('.')
.pipe(g.mockServer({
port: 8090,
host: '192.168.2.109'
}));
});
于是我们看到:
附录:
一:参考资料
1、gulp-mock-server github链接 https://github.com/sanyueyu/gulp-mock-server
2、npm 插件之gulp-mock-server https://www.npmjs.com/package/gulp-mock-server
二:感谢老大cyn的指导。
gulp插件之gulp-mock-server的更多相关文章
- gulp 插件
原文链接:http://www.mamicode.com/info-detail-517085.html gulp是什么? http://gulpjs.com/ 相信你会明白的! 与著名的构建工具gr ...
- 使用gulp插件来自动刷新页面。
http://itakeo.com/blog/2016/05/19/gulpreload/?none=123 使用gulp插件来自动刷新页面.再也不用修改一次,按一下F5了. 首选通过npm inst ...
- Gulp插件笔记
初次接触Gulp是出于网页模块化的需要,用过之后发现这个任务管理工具有很多实用的插件,意外地好用,于是打算写下这篇笔记把用到的Gulp插件记录一下.至于想了解Gulp基本用法的同学可以去Gulp官网查 ...
- gulp插件使用
//引入gulp组件 var gulp=require('gulp'); //创建任务 gulp.task('hello',function(){ console.log('hello'); }); ...
- 常用 Gulp 插件汇总 —— 基于 Gulp 的前端集成解决方案(三)
前两篇文章讨论了 Gulp 的安装部署及基本概念,借助于 Gulp 强大的 插件生态 可以完成很多常见的和不常见的任务.本文主要汇总常用的 Gulp 插件及其基本使用,需要读者对 Gulp 有一个基本 ...
- gulp插件(gulp-jmbuild),用于WEB前端构建
源码地址:https://github.com/jiamao/gulp-jmbuild https://github.com/jiamao/gulp-jmbuild gulp-jmbuild gulp ...
- gulp插件gulp-usemin简单使用
关于什么是gulp,它和grunt有什么区别等问题,这里不做任何介绍.本文主要介绍如何使用gulp-usemin这款插件,同时也会简单介绍本文中用到的一些插件. 什么是gulp-usemin 用来将H ...
- gulp插件
gulp是趋势 gulp完全开发指南 => 快来换掉你的Grunt吧 gulp的工作流程:文件流--文件流--文件流......因为grunt操作会创建临时文件,会有频繁的IO操作,而gulp使 ...
- 将less编译成css的gulp插件
简介:gulp是前端开发过程中对代码进行构建的工具,是自动化项目的构建利器:她不仅能对网站资源进行优化,而且在开发过程中很多重复的任务能够使用正确的工具自动完成:使用她,我们不仅可以很愉快的编写代码, ...
随机推荐
- POJ1077 Eight —— 正向BFS
主页面:http://www.cnblogs.com/DOLFAMINGO/p/7538588.html 代码一:以数组充当队列,利用结构体中的pre追溯上一个状态在数组(队列)中的下标: #incl ...
- Python项目使用memcached缓存
前言许多Web应用都将数据保存到MySQL这样的关系型数据库管理系统中,应用服务器从中读取数据并在浏览器中显示. 但随着数据量的增大.访问的集中,就会出现数据库的负担加重.数据库响应恶化. 网站显示延 ...
- HBase之四--(2):spring hadoop 访问hbase
1. 环境准备: Maven Eclipse Java Spring 2. Maven pom.xml配置 <dependency> <groupId>org.apache ...
- 一个简单的backbone实例(基于139邮箱)
先看一下效果图: 代码如下: <!doctype html> <html lang="en"> <head> <meta http-equ ...
- 未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, Culture=neutral, PublicKeyT
VS2008开发的网站,本地测试没问题,上传到服务器就出错,提示: 引用内容未能加载文件或程序集“Microsoft.ReportViewer.WebForms, Version=9.0.0.0, C ...
- UltraISO制作U盘启动盘-centos7
1.下载.安装UltraISO软件,(网上找到下载) 2.安装好以后,打开软件,显示如下界面: 3.选择镜像 点击菜单栏的“文件”选项,再点击“打开”按钮,选择要刻录的系统镜像: 4.点击菜单栏的“启 ...
- 017--python基础作业
一.练习题: 1.使用while循环输入 1 2 3 ... 8 9 102.求1-100的所有数的和 3.输出 1-100 内的所有奇数 4.输出 1-100 内的所有偶数 5.求1-2+3-4 . ...
- /proc/interrupts 和 /proc/stat 查看中断的情况 (转载)
转自:http://blog.csdn.net/richardysteven/article/details/6064717 在/proc文件系统下,又两个文件提供了中断的信息. /proc/inte ...
- Android Studio:layout-sw600dp文件夹中创建activity_main.xml
1.右键res文件夹,新建Android resource directory文件夹 2.在resource type中选择layout 3.将Directory name命名为layout-sw6 ...
- C++经典面试题全集 50~100道 都附带有参考答案
51. 引用与指针有什么区别? 答 .1) 引用必须被初始化,指针不必. 2) 引用初始化以后不能被改变,指针可以改变所指的对象. 3) 不存在指向空值的引用,但是存在指向空值的指针. 52. 描 ...