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

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

可以实现的功能有：

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安装所需的包

第三步，建立目录结构

其中，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就可以了。

点此下载所有文件

总结

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

赞 (0)

相关推荐

  • 前端构建工具之gulp的语法教程

    前端构建工具之gulp的语法教程

    前言 上一篇说了下gulp的环境搭建以及配置,这一篇说说gulp的语法. 语法说来其实很简单,主要有以下4种: gulp四种语法 现在我们把src下面的index.html文件copy到发布文件夹dist下: 复制单个文件 webstorm下运行 . 点击运行 如此,便有: dist文件夹下更新 复制多个文件 复制到某个特定的文件夹下 每次运行之前都需要更新一下 最终 复制指定文件 排除某个文件 总结 以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如有疑问大家

  • 前端构建工具之gulp的配置与搭建详解

    前端构建工具之gulp的配置与搭建详解

    前言 在如今的前端开发中,已经不再是一些静态文件了. 对于很多Web App来说,前端代码甚至比后端更加复杂,更加难以管理,这主要来源于一下几个方面: 1.许多第三方库的依赖需要自动运行 2.独立的前端测试需要自动运行 3.代码需要发布时打包 一.为什么要使用gulp? 在我们的工作流程里,应该尽量减少重复的工作,很多任务都可以自动去执行,比如一些相关文件的操作,自动监视一些文件的变化,发生变化以后,就去执行事先设计好的任务. 说了这么多,那么gulp到底能做什么? a.创建项目工程 b.压缩各

  • 简单谈谈gulp-changed插件

    前言 gulp-changed插件的作用,是用来过滤未被修改过的文件,只有修改后的文件才能通过管道.这样做的好处时,只处理修改后的文件,减少后续程序的执行时间. 根据官方给出的例子: const SRC = 'src/*.js'; const DEST = 'dist'; gulp.task('default', () => { return gulp.src(SRC) .pipe(changed(DEST)) .pipe(gulp.dest(DEST)) .pipe( /* 其他操作 */ )

  • 详解前端自动化工具gulp自动添加版本号

    之前,我介绍了学习安装并配置前端自动化工具Gulp,觉得gulp确实比grunt的配置简单很多,于是我决定再深入学习一下gulp,就去网上查了资料,发现gulp还可以自动添加版本号,这个功能就为我平时在更新css或js时老是在客户端存在缓存导致更新后的效果无法实时展现的苦恼.所以就赶紧去试了一下,果真可以,很高兴啊,真是为项目开发,为效果的快速展现提供了很多的便利. 实现原理: 1.修改js和css文件: 2.通过对js,css文件内容进行hash运算,生成一个文件的唯一hash字符串(如果文件

  • 基于gulp合并压缩Seajs模块的方式说明

    基于gulp合并压缩Seajs模块的方式说明

    之前的项目一直采用grunt来构建,然后用requirejs做模块化,requirejs官方有提供grunt的插件来做压缩合并.现在的项目切到了gulp,模块化用起了seajs,自然而然地也想到了模块合并压缩的问题. 然后一开始在解决这个问题的时候,并不是很顺利,在npm上并没有那种特别流行的专门用来做seajs合并压缩的gulp插件,虽然在seajs的github上也看了不少的issue,但是大多数都是只能将所有的模块文件合并成一个总的文件,这对于单页面的应用来说肯定没有问题,但是对于多页面的

  • gulp解决跨域的配置文件问题

    废话不多说,直接上代码 //引入插件 var gulp = require('gulp'); // var Proxy = require('gulp-connect-proxy'); var connect = require('gulp-connect'); var proxy = require('http-proxy-middleware'); //使用connect启动一个Web服务器 gulp.task('connect', function () { connect.server(

  • 如何编写javascript的gulp插件

    如何编写javascript的gulp插件

    很久以前,我们在"细说gulp"随笔中,以压缩JavaScript为例,详细地讲解了如何利用gulp来完成前端自动化. 再来短暂回顾下,当时除了借助gulp之外,我们还利用了第三方gulp插件"gulp-uglify",来达到压缩JavaScript文件的目的. 代码如下: 今儿,我们的重点就是,自己也来实现一个gulp插件. 正文 其实,如果只是单纯地想要编写一个gulp插件不难,可以借助through2或者through-gulp来编写(through-gulp

  • 详解前端构建工具gulpjs的使用介绍及技巧

    gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快.如果你还没有使用过前端构建工具,或者觉得gruntjs太难用的话,那就尝试一下gulp吧. 1.gulp的安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次

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

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

    本文主要给大家总结了在工作中可能会用到的小工具,在此记录一下. 可以实现的功能有: 1. 本地http服务器 2.页面实时刷新 3.可以模拟ajax请求 第一步,新建package.json文件. 用到了gulp.gulp-webserver.gulp-livereload package.json的内容如下: { "name": "localserver", "version": "1.0.0", "descrip

  • Tomcat搭建本地服务器的图文教程

    运用背景 相信很多人都使用webpack搭建过小型服务器,那么如果没有webpack配置和依赖管理时,如何启动项目呢?办法有很多,诸如PHPnow,WampServer都可以,本文重点介绍如何使用Tomcat搭建本地服务器. 什么是Tomcat? Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和调试JSP 程序的首选.对于一个初学者来说,可以这样认为,当在一台机器上配置好Apache 服务器,可利

  • 利用nodeJs anywhere搭建本地服务器环境的方法

    公司有个微信端项目,需要前端在手机上随时查看网页,于是乎用Node搭建了一个本地服务器环境,把网页地址发到QQ并用手机打开来查看. 首先去nodeJs官网下载最新版nodeJs https://nodejs.org/en/ 安装成功后win+r打开cmd 输入node -help 或者node -v查看是否安装成功 装好后输入 npm install anywhere -g来安装anywhere.注意如果是mac系统会提示你权限不够,需要在代码前加上 sudo获取管理员权限.即sudo npm

  • nodejs搭建本地服务器轻松解决跨域问题

    nodejs搭建本地服务器轻松解决跨域问题

    最近把以前用jquery写的一个小demo拿出来运行的,刚开始的时候忘了开启本地服务导致控制台一直报XMLHttpRequest cannot load file:///C:/Users/79883/Desktop/ajax/data.json?{%22username%22:%22lcl@qq.com%22,%22pwd%22:%22Home20170702%22}. Cross origin requests are only supported for protocol schemes:

  • 使用live-server快速搭建本地服务器+自动刷新的方法

    1.安装 $ sudo npm install -g live-server 2.使用下面的命令会自动打开当前目录下面的index.html $ live-server 以上这篇使用live-server快速搭建本地服务器+自动刷新的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们.

  • nodejs搭建本地服务器并访问文件操作示例

    nodejs搭建本地服务器并访问文件操作示例

    本文实例讲述了nodejs搭建本地服务器并访问文件操作.分享给大家供大家参考,具体如下: 安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html>

  • webpack-dev-server搭建本地服务器的实现

    目录 前言 webpack-deb-server webpack-dev-server启动报错 解决方案1 解决方案2 解决端口占用问题 前言 当我们使用webpack打包时,发现每次更新了一点代码,都需要重新打包,这样很麻烦,我们希望本地能搭建一个服务器,然后写入新的代码能够自动检测出来,这时候就需要用到webpack-dev-server webpack-deb-server webpack提供了一个可选的本地开发服务器,这个本地服务器基于node.js搭建,内部使用express框架,可以

  • nodejs搭建本地服务器并访问文件的方法

    nodejs搭建本地服务器并访问文件的方法

    安装node:https://nodejs.org/en/download/ 在本地建立目录:f:/nodetest,在该目录下新建index.html作为我们将要访问的内容.新建server.js作为node开启的入口: $ cd f:/nodetest $ mkdir index.html $ mkdir server.js index.html文件里简单写一点东西: <!DOCTYPE html> <html lang="en"> <head>

  • NodeJs搭建本地服务器之使用手机访问的实例讲解

    作为一名不懂后台的前端工程师来说,利用node.js搭建服务器,是一个非常好的选择.下面搭建一个简单的服务器: var app=require("express")(); //接收来自用户的任何请求 app.use(function(req,res){ res.write("The response from server"); res.end(); }); 这个ip地址,楼主之前一直以为是在这里指定IP地址,意味着别人输入这个IP地址就能访问到你的服务器了,其实并

  • 基于http.server搭建局域网服务器过程解析

    不知道大家有没有遇到过这样的情况, 在做项目或者研发的时候,迫切想要将一个文件传输给另一台电脑,却找不到U盘,于是麻烦的通过登陆qq.微信等社交软件 ,或者邮箱等工具进行传输,十分麻烦,让人苦恼.都说Python号称无所不能,除了生孩子啥都行!于是小编今天就给大家介绍一种简单的方式来解决这一问题,通过调用Python中的http.server搭建局域网服务器,让这个问题变得So easy ! 1. 一行Python命令一行Python命令如何搭建局域网,其实很简单,我们用了Python里面的一条

随机推荐