文档章节

利用Gulp搭建本地服务器并实现Ajax模拟

阿振
 阿振
发布于 2016/04/28 11:07
字数 266
阅读 69
收藏 2

利用gulp搭建本地服务器,实现自动打开页面,自动刷新,模拟ajax操作

用到的模块如下:

  • gulp
  • gulp-webserver
  • gulp-livereload

第一步,创建package.json

npm init

第二步,安装模块

npm install gulp --save-dev
npm install gulp-webserver --save-dev
npm install gulp-livereload --save-dev

第三步,创建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']);

© 著作权归作者所有

阿振
粉丝 10
博文 55
码字总数 58791
作品 0
成都
高级程序员
私信 提问
实现前后端分离的心得

原文出处:陈陈jg 实现前后端分离的心得 对目前的web来说,前后端分离已经变得越来越流行了,越来越多的企业/网站都开始往这个方向靠拢。那么,为什么要选择前后端分离呢?前后端分离对实际开...

陈陈jg
2017/07/02
0
0
jQuery 前后端分离项目总结

文档目录 前言 设计阶段 文档 Restful api 技术选型 开发阶段 本地开发与联调 路径、接口状态、登录超时、服务器报错 统一处理返回结果 登录超时、字符串错误、其他字符串 部署测试阶段 项目...

愚坤
2018/07/02
0
0
ES6项目构建-1

基础架构 任务自动化gulp 1.什么是任务自动化 减少人工操作,让机器自动监听操作,自动响应。 2.什么是gulp 一个工具。解决自动构建的工具,增强工作流。 3.gulp的作用 完成工作流。利用它的...

yy不会笑
2017/12/18
0
0
gulp koa nodejs 实现的前段工程分离开发

安装nodejs安装gulp 新建一个工程文件夹运行命令 这个过程中 nodejs会询问你,诸如工程name、版本号之类的信息,按照情况填写就好了结果如下图: init结束后生成了package.json文件 这个文件...

千惊万喜
2016/09/19
72
0
Python爬虫之web内容获取(一)

Python爬虫之web内容获取: 一:简单的向服务器发送请求方式: # -- coding:utf-8 --import urllib2向指定的url 发送请求,并返回响应的类文件对象response = urllib2.urlopen("http://www....

zxszxs
2018/03/30
107
0

没有更多内容

加载失败,请刷新页面

加载更多

高速PCB设计软件allegro中与网络有关的约束规则设置

在allegro pcb的设计过程中,设计约束规则包括时序规则、间距规则、信号完整性规则以及物理规则等,本期主要详细讲解与物理、间距与电气约束中的线宽、线间距物理规则的设置。 一、线宽设置 ...

demyar
18分钟前
2
0
Linux 启动停止SpringBoot jar 程序部署Shell 脚本

#!/bin/bash #这里可替换为你自己的执行程序,其他代码无需更改 APP_NAME=algorithm.jar #使用说明,用来提示输入参数 usage() { echo "Usage: sh 执行脚本.sh [start|stop|restart|status]...

草庐过客
20分钟前
3
0
mysql-connector-java驱动升级到8.0后数据库保存时间出现时差

1.问题:在一个新项目中用到了新版的mysql jdbc 驱动后,发现保存到数据库的时间出现了时差 <dependency> <groupId>mysql</groupId> <artifactId>mysql-connector-java</artifactId>......

ValSong
21分钟前
3
0
好程序员大数据教程Scala系列之隐式转换和隐式参数

5.1. 概念 隐式转换和隐式参数是Scala中两个非常强大的功能,利用隐式转换和隐式参数,你可以提供优雅的类库,对类库的使用者隐匿掉那些枯燥乏味的细节。 5.2. 作用 隐式的对类的方法进行增强...

好程序员官网
25分钟前
2
0
多线程必备

初次接触线程,可能有很多初学者搞不明白,始终云里雾里,那么本篇文章直接带大家介绍多线程必须知道的几个点 接下来没有多余,直接上干货 1. 进程和线程的区别是什么? 进程是执行着的应用程序,...

理性思考
28分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部