gulp-devserver

一个本地调试gulp插件，具备如下功能：

• 随时随地启动一个静态文件服务器
• 监听文件变化，自动重新加载
• 代理接口，让ajax跨域不再是个事儿
• 假数据数据生成，轻松调试
• console劫持，轻量级远程调试助手

Installation

作为gulp插件使用：

$ npm install --save-dev gulp-devserver

单独使用：

$ npm install gulp-devserver -g

Usage

作为gulp插件使用：

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\//
      }
     }));
});

单独使用：

$ 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 <n>    the port to run on

下面是一个config.js配置文件模板：

module.exports = {
	livereload: {
		clientConsole: true
	},
	proxy: {
    	enable: true,
    	host: 'http://w3cboy.com',
    	urls: '/api/list'
	}
};

Options

port

静态服务器端口。default: 3000

defaultFile

启动服务器默认打开的文件，当设置listdir为true时将不会生效。default: index.html

defaultExts

启动服务器默认文件后缀，当文件没有找到的时候默认尝试使用默认文件后缀再尝试一次。default: ['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目录下文件
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:

// server config
proxy: {
	enable: true,
	host: 'http://w3cboy.com',
	urls: '/api/list'
}

// client
$.getJSON('/api/list', function (data) {
	console.log(data);
});

那么收到如上ajax请求服务器会去http://w3cboy.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。