使用gulp搭建本地服务器并实现模拟ajax


Posted in Javascript onApril 05, 2017

本文主要给大家总结了在工作中可能会用到的小工具,在此记录一下。

可以实现的功能有:

       1. 本地http服务器

       2.页面实时刷新

       3.可以模拟ajax请求

第一步,新建package.json文件。

用到了gulp、gulp-webserver、gulp-livereload

package.json的内容如下:

{
 "name": "localserver",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "author": "",
 "license": "ISC",
 "devDependencies": {
 "gulp": "^3.9.1",
 "gulp-webserver": "^0.9.1",
 "gulp-livereload": "^3.8.1"
 }
}

第二步,在当前目录下执行npm install安装所需的包

第三步,建立目录结构

使用gulp搭建本地服务器并实现模拟ajax

其中,www是站点的根目录,用于放置html/js/css等静态文件,api是用于放置模拟ajax请求的js文件,如test.js。则ajax请求/api/test的时候,返回改文件的内容,是一个json对象。

第四步,编写gulpfile.js

gulpfile.js内容如下:

var url = require('url');
var fs = require('fs');
var path = require('path');

gulp = require('gulp');
livereload = require('gulp-livereload');
webserver = require('gulp-webserver');

//web服务器
gulp.task('webserver', function() {
 gulp.src('./www') // 服务器目录(./代表根目录)
 .pipe(webserver({ // 运行gulp-webserver
 port: 8000, //端口,默认8000
 livereload: true, // 启用LiveReload
 open: true, // 服务器启动时自动打开网页
 directoryListing: {
  enable: true,
  path: './www'
 },
 middleware: function(req, res, next) {
  //mock local data
  var urlObj = url.parse(req.url, true),
  method = req.method;


  if (!urlObj.pathname.match(/^\/api/)) { //不是api开头的数据,直接next
  next();
  return;
  }
  var mockDataFile = path.join(__dirname, urlObj.pathname) + ".js";
  //file exist or not
  fs.access(mockDataFile, fs.F_OK, function(err) {
  if (err) {
   res.setHeader('Content-Type', 'application/json');
   res.end(JSON.stringify({
   "status": "没有找到此文件",
   "notFound": mockDataFile
   }));
   return;
  }
  var data = fs.readFileSync(mockDataFile, 'utf-8');
  res.setHeader('Content-Type', 'application/json');
  res.end(data);
  });
  next();
 },
 proxies: []
 }));
});


// 默认任务
gulp.task('default', ['webserver']);

第五步,执行gulp命令,会自动打开浏览器,在8000端口起了http服务。就可以看到你的页面了。 

为了给大家使用方便,我把建立好的目录和文件放在这里了,你下载后,直接运行npm install,然后gulp就可以了。

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
Js注册协议倒计时的小例子
Jun 24 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
Sep 22 Javascript
jQuery使用toggleClass方法动态添加删除Class样式的方法
Mar 26 Javascript
javascript实现验证IP地址等相关信息代码
May 10 Javascript
.NET微信公众号开发之创建自定义菜单
Jul 16 Javascript
编写高质量JavaScript代码的基本要点
Mar 02 Javascript
VUEJS实战之修复错误并且美化时间(2)
Jun 13 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
Oct 26 Javascript
微信小程序tabBar设置实例解析
Nov 14 Javascript
解决Vue.js应用回退或刷新界面时提示用户保存修改问题
Nov 24 Javascript
vue实现表单未编辑或未保存离开弹窗提示功能
Apr 08 Javascript
JavaScript通如何过RGraph实现动态仪表盘
Oct 15 Javascript
Vue.js render方法使用详解
Apr 05 #Javascript
self.attachevent is not a function的解决方法
Apr 04 #Javascript
Vue.js实战之通过监听滚动事件实现动态锚点
Apr 04 #Javascript
Vue.js实战之使用Vuex + axios发送请求详解
Apr 04 #Javascript
Vue.js实战之组件的进阶
Apr 04 #Javascript
关于axios返回空对象的问题解决
Apr 04 #Javascript
jQuery自定义图片上传插件实例代码
Apr 04 #jQuery
You might like
PHP自动重命名文件实现方法
2014/11/04 PHP
CentOS下搭建PHP环境与WordPress博客程序的全流程总结
2016/05/07 PHP
php中strlen和mb_strlen用法实例分析
2016/11/12 PHP
PHP 出现 http500 错误的解决方法
2021/03/09 PHP
编写跨浏览器的javascript代码必备[js多浏览器兼容写法]
2008/10/29 Javascript
Javascript 文件夹选择框的两种解决方案
2009/07/01 Javascript
文本框的字数限制功能jquery插件
2009/11/24 Javascript
几个比较实用的JavaScript 测试及效验工具
2010/04/18 Javascript
js 禁止选择功能实现代码(兼容IE/Firefox)
2010/04/23 Javascript
jquery 滚动条事件简单实例
2013/07/12 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
2013/11/21 Javascript
为jQuery添加Webkit的触摸的方法分享
2014/02/02 Javascript
全面兼容的javascript时间格式化函数(比较实用)
2014/05/14 Javascript
Ext GridPanel加载完数据后进行操作示例代码
2014/06/17 Javascript
js中键盘事件实例简析
2015/01/10 Javascript
JS 实现banner图片轮播效果(鼠标事件)
2017/08/04 Javascript
vue2 前端搜索实现示例
2018/02/26 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue自定义指令实现方法详解
2019/02/11 Javascript
详解小程序云开发数据库
2019/05/20 Javascript
Vue.js使用axios动态获取response里的data数据操作
2020/09/08 Javascript
[00:47]TI7不朽珍藏III——沙王不朽展示
2017/07/15 DOTA
python每次处理固定个数的字符的方法总结
2013/01/29 Python
尝试用最短的Python代码来实现服务器和代理服务器
2016/06/23 Python
python爬虫神器Pyppeteer入门及使用
2019/07/13 Python
parser.add_argument中的action使用
2020/04/20 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
详解python百行有效代码实现汉诺塔小游戏(简约版)
2020/10/30 Python
.NET现在共支持多少种语言
2014/02/26 面试题
幼儿园长自我鉴定
2013/10/17 职场文书
历史专业毕业生的自我鉴定
2013/11/15 职场文书
法学毕业生自我鉴定
2014/01/31 职场文书
绘画专业自荐信
2014/07/04 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
趣味运动会广播稿
2014/09/13 职场文书
熟背这些句子,让您的英语口语突飞猛进(135句)
2019/09/06 职场文书