Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/huanz/gulp-devserver
a gulp plugin for static server with livereload，ajax cross domain handler，simulation data generator
https://github.com/huanz/gulp-devserver
gulp livereload mock proxy server
Last synced: about 2 months ago
JSON representation
a gulp plugin for static server with livereload，ajax cross domain handler，simulation data generator
- Host: GitHub
- URL: https://github.com/huanz/gulp-devserver
- Owner: huanz
- Created: 2015-09-10T11:56:55.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2019-10-08T10:42:55.000Z (over 5 years ago)
- Last Synced: 2024-11-14T02:37:45.585Z (about 2 months ago)
- Topics: gulp, livereload, mock, proxy, server
- Language: JavaScript
- Homepage:
- Size: 36.1 KB
- Stars: 15
- Watchers: 4
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# gulp-devserver [](https://github.com/huanz/gulp-devserver/stargazers) [](https://www.npmjs.com/package/gulp-devserver)
[](https://www.npmjs.com/package/gulp-devserver)
一个本地调试`gulp`插件，具备如下功能：
- 随时随地启动一个静态文件服务器
- 监听文件变化，自动重新加载
- 代理接口，让 ajax 跨域不再是个事儿
- 假数据数据生成，轻松调试
- console 劫持，轻量级远程调试助手
# Installation
作为`gulp`插件使用：
```bash
$ npm install --save-dev gulp-devserver
```
单独使用：
```bash
$ npm install gulp-devserver -g
```
# Usage
作为`gulp`插件使用：
```javascript
var gulp = require('gulp');
var server = require('gulp-devserver');
gulp.task('devserver', function() {
gulp.src('./app').pipe(
server({
livereload: {
clientConsole: true
},
proxy: {
enable: true,
host: 'http://w3cboy.com',
urls: /^\/api\//
}
})
);
});
```
单独使用：
```bash
$ 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 (default: false)
-p, --port the port to run on
```
下面是一个`config.js`配置文件模板：
```javascript
module.exports = {
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`:
```javascript
// 过滤掉node_modules目录下文件
filter: function(filename) {
return !/\/\.svn\/|\/\.git\/|\/node_modules\//.test(filename);
}
```
**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:
```javascript
// server config
proxy: {
enable: true,
host: 'https://noonme.com',
urls: '/api/list'
}
// client
$.getJSON('/api/list', function (data) {
console.log(data);
});
```
那么收到如上 ajax 请求服务器会去`https://noonme.com/api/list`请求数据返回，于是头痛的跨域问题没有了。
**proxy.mock**
开发中经常遇到的问题是接口还没出来，没数据怎么办？你需要写一堆假数据，现在不需要了，我们只需要配置 mock 项。
```javascript
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](http://mockjs.com/examples.html)
`proxy.mock`的优先级比`proxy.urls`要高，因此匹配到 mock 了就会去走 mock，匹配不到的依然走`proxy.urls`。