gulp-webserver搭建本地服务

前情提要

这个是三年前的老项目了，换了运营换了后端又换了前端。但是最近老板对这个项目很重视，所以改动非常之频繁。前端代码混在后端项目里，每次部署还得麻烦后端，而且最致命的是：必须依赖后端部署了接口之后，再代理本地资源，在测试环境测试，根本没法本地mock数据。综上所述，前后端分离势必要做了。

前端项目是gulp打包的，最初考虑推倒然后用webpack重新搭一套（现有项目基本都是webpack）。但是再一思索：gulp还不至于那么不堪到恨不得赶紧甩掉，而且这样的做法实在有些舍近求远了。因而怀着学习gulp扩展技能树的念头，网上搜索一番，找到官方文档。自己摸索摸索，倒也配置成功了。走了些弯路，有了些经验，记录在此，以供参考。

安装gulp-webserver

> npm install -D gulp-webserver

json配置

在根目录下，创建json文件夹及proxies.json文件。
proxies.json文件，将接口对应到本地json文件。

// proxies.json
{
    "/abc": "abc.json",
    "/123": "123.json"
}

json文件夹，用于存放每个接口对应的mock数据。

|-json
    |-abc.json
    |-123.json

编写gulpfile.js

var fs = require('fs');
var gulp = require('gulp');
var proxies = require('./proxies.json');
var webserver = require('gulp-webserver');

// 本地静态资源服务
gulp.task('webserver', function () {
    return gulp.src('.')
        .pipe(webserver({
            // 自动打开网页
            open: true,
            // 热加载
            livereload: true,
            // 运行端口号
            port: 8089,
            // 默认访问的html地址，若请求不被处理则返回此html
            fallback: './public/admin.html',
            // ⚠️关键代码
            middleware: function (req, res, next) {
                // 将请求的path提取出来
                let path = req.originalUrl.split('?')[0];
                // 若请求在我们记录的json对象中，则处理
                if (path in proxies) {
                    // 拼接json文件路径
                    let filename = `./json/${proxies[path]}`;
                    try {
                        // 尝试打开json文件
                        fs.accessSync(filename, fs.constants.R_OK);
                        // 构造返回对象HTTP头
                        res.setHeader('Content-Type', 'application/json');
                        // 读取json文件内容即mock数据
                        var data = fs.readFileSync(filename, 'utf-8');
                        // 将mock数据装入返回对象
                        res.end(data);
                    } catch (err) {
                        // 构造错误时的返回内容
                        res.setHeader('Content-Type', 'application/json');
                        res.end(JSON.stringify({
                            "status": "没有找到文件",
                            "notFound": filename
                        }));
                    }
                } else {
                    // 对当前请求不做处理，继续下一个
                    next();
                }
            }
        }));
});

// 运行gulp dev即可
gulp.task('dev', ['webserver'], function () {});