1 | gulp-live-server
|
2 | ===
|
3 |
|
4 | [![status][1]][2] [![downloads][3]][4] [![tag][5]][6] [![license][7]][8]
|
5 |
|
6 | [1]: http://img.shields.io/travis/gimm/gulp-live-server/master.svg?style=flat-square
|
7 | [2]: https://travis-ci.org/gimm/gulp-live-server
|
8 |
|
9 | [3]: http://img.shields.io/npm/dm/gulp-live-server.svg?style=flat-square
|
10 | [4]: https://www.npmjs.com/package/gulp-live-server
|
11 |
|
12 | [5]: https://img.shields.io/github/tag/gimm/gulp-live-server.svg?style=flat-square
|
13 | [6]: https://github.com/gimm/gulp-live-server/releases
|
14 |
|
15 | [7]: http://img.shields.io/badge/license-WTFPL-blue.svg?style=flat-square
|
16 | [8]: http://www.wtfpl.net
|
17 |
|
18 | A handy, light-weight server you're going to love.
|
19 |
|
20 | - [Install](#install)
|
21 | - [Usage](#usage)
|
22 | - [API](#api)
|
23 | - [static](#staticfolder-port)
|
24 | - [new](#newscript)
|
25 | - [gls](#glsargs-options-livereload)
|
26 | - [start](#start)
|
27 | - [stop](#stop)
|
28 | - [notify](#notifyevent)
|
29 | - [livereload.js](#livereloadjs)
|
30 | - [Debug](#debug)
|
31 |
|
32 | Install
|
33 | ---
|
34 | [![NPM](https://nodei.co/npm/gulp-live-server.png?compact=true)](https://nodei.co/npm/gulp-live-server/)
|
35 |
|
36 | Usage
|
37 | ---
|
38 | - serve a static folder
|
39 |
|
40 | ```js
|
41 | var gulp = require('gulp');
|
42 | var gls = require('gulp-live-server');
|
43 | gulp.task('serve', function() {
|
44 | var server = gls.static();
|
45 | server.start();
|
46 | //live reload changed resource(s)
|
47 | gulp.watch(['static/**/*.css', 'static/**/*.html'], server.notify);
|
48 | });
|
49 | ```
|
50 | - fire up your own server
|
51 |
|
52 | ```js
|
53 | gulp.task('serve', function() {
|
54 | var server = gls.new('myapp.js');
|
55 | server.start();
|
56 | gulp.watch(['static/**/*.css', 'static/**/*.html'], server.notify);
|
57 | //restart my server
|
58 | gulp.watch('myapp.js', server.start);
|
59 | });
|
60 | ```
|
61 | More [examples](https://github.com/gimm/gulp-live-server/tree/master/example)
|
62 |
|
63 | API
|
64 | ---
|
65 | ### static([folder][, port])
|
66 | - `folder` - `String|Array` The folder(s) to serve.
|
67 | Use array of strings if there're multi folders to serve.
|
68 | If omitted, defaults to `public/`.
|
69 | - `port` - `Number` The port to listen on. Defaults to `3000`.
|
70 | - return [gls](#glsargs-options-livereload).
|
71 |
|
72 | Config new server using the [default server script](https://github.com/gimm/gulp-live-server/blob/master/scripts/static.js), to serve the given `folder` on the specified `port`.
|
73 |
|
74 | ### new(script)
|
75 | - `script` - `String` The script file to run.
|
76 | - return [gls](#glsargs-options-livereload).
|
77 |
|
78 | Config new server using the given `script`.
|
79 |
|
80 | ### gls(args[, options][, livereload])
|
81 | - `args` - `String|Array` The 2nd param for [ChildProcess.spawn](http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options).
|
82 | - `options` - `Object` The 3rd param for [ChildProcess.spawn](http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options),
|
83 | will be mixin into the default value:
|
84 |
|
85 | ```js
|
86 | options = {
|
87 | cwd: undefined
|
88 | }
|
89 | options.env = process.env;
|
90 | options.env.NODE_ENV = 'development';
|
91 | ```
|
92 | - `livereload` - `Boolean|Number|Object` The option for tiny-lr server. The default value is `35729`.
|
93 | - `false` - will disable tiny-lr livereload server.
|
94 | - `number` - treated as port number of livereload server.
|
95 | - `object` - used to create tiny-lr server new tinylr.Server(livereload);
|
96 |
|
97 | **`gls` here is a reference of `var gls = require('gulp-live-server')`**. It aims to assemble configuration for the server child process as well as the tiny-lr server.
|
98 | **`static` and `new` are just shortcuts for this.**
|
99 | Usually, `static` and `new` will serve you well, but you can get more customized server with `gls`.
|
100 |
|
101 | ### start()
|
102 | - return [promise](https://github.com/kriskowal/q/wiki/API-Reference) from [Q](https://www.npmjs.com/package/q)
|
103 |
|
104 | Spawn a new child process based on the configuration.
|
105 | - use [`ChildProcess.spawn`](http://nodejs.org/api/child_process.html#child_process_child_process_spawn_command_args_options) to start a node process;
|
106 | - use [`tiny-lr`](https://github.com/mklabs/tiny-lr) provide livereload ability;
|
107 |
|
108 | ### stop()
|
109 | - return [promise](https://github.com/kriskowal/q/wiki/API-Reference) from [Q](https://www.npmjs.com/package/q)
|
110 |
|
111 | Stop the server.
|
112 |
|
113 | ### notify([event])
|
114 | - `event` - `Event` Event object passed along with [gulp.watch](https://github.com/gulpjs/gulp/blob/master/docs/API.md#cbevent).
|
115 | Optional when used with `pipe`.
|
116 |
|
117 | Tell livereload.js to reload the changed resource(s)
|
118 |
|
119 | livereload.js
|
120 | ---
|
121 | glup-live-server comes with [tiny-lr](https://github.com/mklabs/tiny-lr/) built in, which works as a livereload server,
|
122 | In order to make livereload work with your pages, you still need `livereload.js` loaded with your page, there're 3 options to achieve this:
|
123 | - [LiveReload](https://chrome.google.com/webstore/detail/livereload/jnihajbhpnppcggbcgedagnkighmdlei?hl=en) for Chrome;
|
124 | - Use [connect-livereload](https://github.com/intesso/connect-livereload) middleware;
|
125 | - Add [livereload.js](https://github.com/livereload/livereload-js) in your page mannully;
|
126 |
|
127 | Usually, you can check `http://livereload:35729/livereload.js` to see if livereload.js is loaded with your page.
|
128 |
|
129 | DEBUG
|
130 | ---
|
131 | If you want more output, set the `DEBUG` environment variables to `*` or `gulp-live-server`.
|