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: '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目录下文件
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: 'https://noonme.com',
  urls: '/api/list'
}

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

那么收到如上 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。