A handy, light-weight server you're going to love.
-
Serve a static folder(
gls.script<'scripts/static.js'> is used as server script)var gulp = require('gulp'); var gls = require('gulp-live-server'); gulp.task('serve', function() { //1. serve with default settings var server = gls.static(); //equals to gls.static('public', 3000); server.start(); //2. serve at custom port var server = gls.static('dist', 8888); server.start(); //3. serve multi folders var server = gls.static(['dist', '.tmp']); server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); });
-
Serve with your own script file
gulp.task('serve', function() { //1. run your script as a server var server = gls.new('myapp.js'); server.start(); //2. run script with cwd args, e.g. the harmony flag var server = gls.new(['--harmony', 'myapp.js']); //this will achieve `node --harmony myapp.js` //you can access cwd args in `myapp.js` via `process.argv` server.start(); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); gulp.watch('myapp.js', server.start.bind(server)); //restart my server // Note: try wrapping in a function if getting an error like `TypeError: Bad argument at TypeError (native) at ChildProcess.spawn` gulp.watch('myapp.js', function() { server.start.bind(server)() }); });
-
Customized serving with gls
gulp.task('serve', function() { //1. gls is the base for `static` and `new` var server = gls([gls.script, 'static', 8000]); //equals gls.new([gls.script, 'static', 8000]); //equals gls.static('static', 8000); server.start(); //2. set running options for the server, e.g. NODE_ENV var server = gls('myapp.js', {env: {NODE_ENV: 'development'}}); server.start(); //3. customize livereload server, e.g. port number var server = gls('myapp.js', undefined, 12345); var promise = server.start(); //optionally handle the server process exiting promise.then(function(result) { //log, exit, re-start, etc... }); //4. start with coffee-script executable e.g. installed with npm var server = gls('myapp.coffee'); server.start('node_modules/coffee-script/bin/coffee'); //use gulp.watch to trigger server actions(notify, start or stop) gulp.watch(['static/**/*.css', 'static/**/*.html'], function (file) { server.notify.apply(server, [file]); }); gulp.watch('myapp.js', server.start.bind(server)); //restart my server // Note: try wrapping in a function if getting an error like `TypeError: Bad argument at TypeError (native) at ChildProcess.spawn` gulp.watch('myapp.js', function() { server.start.bind(server)() }); });
folder-String|ArrayThe folder(s) to serve. Use array of strings if there're multi folders to serve. If omitted, defaults topublic/.port-NumberThe port to listen on. Defaults to3000.- return gls.
Config new server using the default server script, to serve the given folder on the specified port.
script-StringThe script file to run.- return gls.
Config new server using the given script.
-
args-String|ArrayThe 2nd param for ChildProcess.spawn. -
options-ObjectThe 3rd param for ChildProcess.spawn, will be mixin into the default value:options = { cwd: undefined } options.env = process.env; options.env.NODE_ENV = 'development';
-
livereload-Boolean|Number|ObjectThe option for tiny-lr server. The default value is35729.false- will disable tiny-lr livereload server.number- treated as port number of livereload server.object- used to create tiny-lr server new tinylr.Server(livereload);
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.
static and new are just shortcuts for this.
Usually, static and new will serve you well, but you can get more customized server with gls.
execPath-StringThe executable that is used to start the server. If none is given the current node executable is used.- return promise from Q, resolved with the server process exits.
Spawn a new child process based on the configuration.
- use
ChildProcess.spawnto start a node process; - use
tiny-lrprovide livereload ability;
Stop the server.
event-EventEvent object passed along with gulp.watch. Optional when used withpipe.
Tell livereload.js to reload the changed resource(s)
gulp-live-server comes with tiny-lr built in, which works as a livereload server. livereload.js is served by tiny-lr, but in order to get it loaded with your page, you have 3 options( to inject <script src="//localhost:35729/livereload.js"></script> into your page):
- LiveReload for Chrome;
- Use connect-livereload middleware;
- Add livereload.js in your page manually;
Usually, if http://localhost:35729/livereload.js is accessible, then your livereload server is ok, if you don't have the script tag for livereload.js in you page, you've problem with either your chrome plugin or the connect-livereload middle-ware as mentioned above.
If you want more output, set the DEBUG environment variables to * or gulp-live-server.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent