{"id":20881710,"url":"https://github.com/huanz/gulp-devserver","last_synced_at":"2025-05-12T17:30:51.072Z","repository":{"id":57257335,"uuid":"42241737","full_name":"huanz/gulp-devserver","owner":"huanz","description":"a gulp plugin for static server with livereload，ajax cross domain handler，simulation data generator","archived":false,"fork":false,"pushed_at":"2019-10-08T10:42:55.000Z","size":37,"stargazers_count":15,"open_issues_count":2,"forks_count":5,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-14T02:37:45.585Z","etag":null,"topics":["gulp","livereload","mock","proxy","server"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/huanz.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-09-10T11:56:55.000Z","updated_at":"2023-03-07T05:18:49.000Z","dependencies_parsed_at":"2022-09-08T11:03:39.622Z","dependency_job_id":null,"html_url":"https://github.com/huanz/gulp-devserver","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanz%2Fgulp-devserver","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanz%2Fgulp-devserver/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanz%2Fgulp-devserver/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/huanz%2Fgulp-devserver/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/huanz","download_url":"https://codeload.github.com/huanz/gulp-devserver/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224849743,"owners_count":17380124,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","livereload","mock","proxy","server"],"created_at":"2024-11-18T07:26:03.910Z","updated_at":"2024-11-18T07:26:04.526Z","avatar_url":"https://github.com/huanz.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# gulp-devserver [![stars](https://img.shields.io/github/stars/huanz/gulp-devserver.svg?style=flat-square)](https://github.com/huanz/gulp-devserver/stargazers) [![npm package](https://img.shields.io/npm/v/gulp-devserver.svg?style=flat-square)](https://www.npmjs.com/package/gulp-devserver)\n\n[![npm](https://nodei.co/npm/gulp-devserver.png)](https://www.npmjs.com/package/gulp-devserver)\n\n一个本地调试`gulp`插件，具备如下功能：\n\n- 随时随地启动一个静态文件服务器\n- 监听文件变化，自动重新加载\n- 代理接口，让 ajax 跨域不再是个事儿\n- 假数据数据生成，轻松调试\n- console 劫持，轻量级远程调试助手\n\n# Installation\n\n作为`gulp`插件使用：\n\n```bash\n$ npm install --save-dev gulp-devserver\n```\n\n单独使用：\n\n```bash\n$ npm install gulp-devserver -g\n```\n\n# Usage\n\n作为`gulp`插件使用：\n\n```javascript\nvar gulp = require('gulp');\nvar server = require('gulp-devserver');\n\ngulp.task('devserver', function() {\n  gulp.src('./app').pipe(\n    server({\n      livereload: {\n        clientConsole: true\n      },\n      proxy: {\n        enable: true,\n        host: 'http://w3cboy.com',\n        urls: /^\\/api\\//\n      }\n    })\n  );\n});\n```\n\n单独使用：\n\n```bash\n$ devs --help\n\n  Usage: devs [options]\n\n  Options:\n\n    -h, --help        output usage information\n    -V, --version     output the version number\n    -c, --config      The option config.js file path\n    -d, --dir         The option static files dir\n    -n, --no-browser do not open the localhost server in a browser\n    -b, --debug open debug (default: false)\n    -p, --port \u003cn\u003e the port to run on\n```\n\n下面是一个`config.js`配置文件模板：\n\n```javascript\nmodule.exports = {\n  livereload: {\n    clientConsole: true\n  },\n  proxy: {\n    enable: true,\n    host: 'https://noonme.com',\n    urls: '/api/list'\n  }\n};\n```\n\n# Options\n\n**port**\n\n静态服务器端口。`default`: `3000`\n\n**defaultFile**\n\n启动服务器默认打开的文件，当设置`listdir`为`true`时将不会生效。`default`: `index.html`\n\n**https**\n\n静态服务器是否使用`https`协议。`default`: `false`\n\n**open**\n\n是否启动服务器同时打开浏览器。`default`: `true`\n\n**debug**\n\n在控制台打印日志，当为`true`会答打印每条请求的日志。`default`: `false`\n\n**livereload.enable**\n\n是否开启 livereload 功能，监听文件变化自动重新加载。`default`: `true`\n\n**livereload.port**\n\nlivereload 所需文件服务器端口。`default`: `35729`\n\n**livereload.filter**\n\n过滤不需要重新加载的文件。`default`:\n\n```javascript\n// 过滤掉node_modules目录下文件\nfilter: function(filename) {\n  return !/\\/\\.svn\\/|\\/\\.git\\/|\\/node_modules\\//.test(filename);\n}\n```\n\n**livereload.clientConsole**\n\n是否劫持`console`，开启之后将会把每一条`console`信息发送到 server 控制台。当在 webview 远程调试的时候，你可以开启此功能，它会把你的 js 错误信息发送到 server 控制台。如果你想在浏览器控制台使用原生的`console`功能，请使用`__console`。`default`: `false`\n\n**listdir**\n\n启动服务器的时候是否列出当前文件夹文件列表。`default`: `true`\n\n**proxy.enable**\n\n是否开启接口代理功能。`default`: `false`\n\n**proxy.host**\n\n通过`proxy.urls`匹配（只匹配请求 url 里面的 path 部分）到的`url`都会到这个`host`下面去请求。\n\n**proxy.urls**\n\n可以是一个数组，每一项都可以是一个正则对象或者字符串；也可以是一个单独的正则对象或者字符串，用来匹配相关的请求 url，匹配到的 url 都会去`proxy.host`请求数据。eg:\n\n```javascript\n// server config\nproxy: {\n  enable: true,\n  host: 'https://noonme.com',\n  urls: '/api/list'\n}\n\n// client\n$.getJSON('/api/list', function (data) {\n  console.log(data);\n});\n```\n\n那么收到如上 ajax 请求服务器会去`https://noonme.com/api/list`请求数据返回，于是头痛的跨域问题没有了。\n\n**proxy.mock**\n\n开发中经常遇到的问题是接口还没出来，没数据怎么办？你需要写一堆假数据，现在不需要了，我们只需要配置 mock 项。\n\n```javascript\nproxy: {\n  enable: true,\n  mock: {\n    '/api/list': {\n      'list|20': [{\n        'id|+1': 1,\n        'name': '@cname',\n        'email': '@email',\n        'title': '@ctitle',\n        'url': '@url',\n        'image': '@image(150x150)',\n        'date': '@now(\"T\")'\n      }]\n    }\n  }\n}\n```\n\n关于 mock 数据模板的详细用法请参考：[Mock.js](http://mockjs.com/examples.html)\n\n`proxy.mock`的优先级比`proxy.urls`要高，因此匹配到 mock 了就会去走 mock，匹配不到的依然走`proxy.urls`。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanz%2Fgulp-devserver","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhuanz%2Fgulp-devserver","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhuanz%2Fgulp-devserver/lists"}