微信号:FrontDev

介绍:分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯

利用gulp搭建本地服务器,并能模拟ajax

2016-04-27 20:31 前端大全

(点击上方公众号,可快速关注)


作者:吕大豹

链接:http://www.cnblogs.com/lvdabao/p/gulp-webserver-with-ajax-mock.html


工作中可能会用到的小工具,在此记录一下。可以实现的功能有:


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


点此下载所有文件(http://files.cnblogs.com/files/lvdabao/localserver.zip)



【今日微信公号推荐↓】

更多推荐请看值得关注的技术和设计公众号


其中推荐了包括技术设计极客 和 IT相亲相关的热门公众号。技术涵盖:Python、Web前端、Java、安卓、iOS、PHP、C/C++、.NET、Linux、数据库、运维、大数据、算法、IT职场等。点击《值得关注的技术和设计公众号》,发现精彩!

 
前端大全 更多文章 详解Javascript中的Object对象 结合个人经历总结的前端入门方法 前端不为人知的一面–前端冷知识集锦 一份优秀的前端开发工程师简历是怎么样的? 浅谈Web缓存
猜您喜欢 敏捷破冰之旅(七) 敬请注意:企业网D1Net公众平台迁移公告! ios自学:苹果要开放 iOS 系统,你准备好了吗? 欢迎加入天猫技术团队,约起来! 干货分享:PHP培训实战教程之10大误解