gulp-devserver
一个本地调试gulp
插件,具备如下功能:
- 随时随地启动一个静态文件服务器
- 监听文件变化,自动重新加载
- 代理接口,让 ajax 跨域不再是个事儿
- 假数据数据生成,轻松调试
- console 劫持,轻量级远程调试助手
Installation
作为gulp
插件使用:
$ npm install --save-dev gulp-devserver
单独使用:
$ npm install gulp-devserver -g
Usage
作为gulp
插件使用:
var gulp = ;var server = ; gulp;
单独使用:
$ devs --help Usage: devs [options] Options: -h, --help output usage information -V, --version output the version number -c, --config The option config.js file path -d, --dir The option static files dir -n, --no-browser do not open the localhost server in a browser -b, --debug open debug -p, --port <n> the port to run on
下面是一个config.js
配置文件模板:
moduleexports = livereload: clientConsole: true proxy: enable: true host: 'https://noonme.com' urls: '/api/list' ;
Options
port
静态服务器端口。default
: 3000
defaultFile
启动服务器默认打开的文件,当设置listdir
为true
时将不会生效。default
: index.html
https
静态服务器是否使用https
协议。default
: false
open
是否启动服务器同时打开浏览器。default
: true
debug
在控制台打印日志,当为true
会答打印每条请求的日志。default
: false
livereload.enable
是否开启 livereload 功能,监听文件变化自动重新加载。default
: true
livereload.port
livereload 所需文件服务器端口。default
: 35729
livereload.filter
过滤不需要重新加载的文件。default
:
// 过滤掉node_modules目录下文件 { return !/\/\.svn\/|\/\.git\/|\/node_modules\//;}
livereload.clientConsole
是否劫持console
,开启之后将会把每一条console
信息发送到 server 控制台。当在 webview 远程调试的时候,你可以开启此功能,它会把你的 js 错误信息发送到 server 控制台。如果你想在浏览器控制台使用原生的console
功能,请使用__console
。default
: false
listdir
启动服务器的时候是否列出当前文件夹文件列表。default
: true
proxy.enable
是否开启接口代理功能。default
: false
proxy.host
通过proxy.urls
匹配(只匹配请求 url 里面的 path 部分)到的url
都会到这个host
下面去请求。
proxy.urls
可以是一个数组,每一项都可以是一个正则对象或者字符串;也可以是一个单独的正则对象或者字符串,用来匹配相关的请求 url,匹配到的 url 都会去proxy.host
请求数据。eg:
// server configproxy: enable: true host: 'https://noonme.com' urls: '/api/list' // client$;
那么收到如上 ajax 请求服务器会去https://noonme.com/api/list
请求数据返回,于是头痛的跨域问题没有了。
proxy.mock
开发中经常遇到的问题是接口还没出来,没数据怎么办?你需要写一堆假数据,现在不需要了,我们只需要配置 mock 项。
proxy: enable: true mock: '/api/list': 'list|20': 'id|+1': 1 'name': '@cname' 'email': '@email' 'title': '@ctitle' 'url': '@url' 'image': '@image(150x150)' 'date': '@now("T")'
关于 mock 数据模板的详细用法请参考:Mock.js
proxy.mock
的优先级比proxy.urls
要高,因此匹配到 mock 了就会去走 mock,匹配不到的依然走proxy.urls
。