Gulp Live Server

0.0.31 · abandoned · verified Sun Apr 19

gulp-live-server is a lightweight Gulp plugin designed to provide a development server with integrated live-reloading capabilities for static assets or Node.js applications. It abstracts the complexities of setting up a web server (potentially using `connect` or `express` internally) and a separate LiveReload server (via `tiny-lr`), allowing developers to quickly spin up a server and have their browser automatically refresh upon file changes. The package offers methods for serving static files, running a custom Node.js script as the server, and notifying the browser of updates. Despite its utility, the package is largely unmaintained, with its last release (version 0.0.31) dating back over 7 years to July 2017. Users should be aware of potential compatibility issues with newer Node.js versions or modern Gulp setups, especially those using ES Modules.

Common errors

```
TypeError: Bad argument at TypeError (native) at ChildProcess.spawn
```
cause The `server.start` method's `this` context is lost when bound directly in `gulp.watch`.

fix Wrap the bound function in an anonymous function: `gulp.watch('myapp.js', function() { server.start.bind(server)() });`
```
ERR_REQUIRE_ESM
```
cause Attempting to `require()` this CommonJS-only package in an ES Module context (e.g., a file with `"type": "module"` in `package.json` or a `.mjs` extension).

fix Ensure your `gulpfile.js` is a CommonJS file (plain `.js` without `"type": "module"` in `package.json` or a separate `cjs` folder for Gulp tasks) and use `const gls = require('gulp-live-server');`.
```
ReferenceError: gulp is not defined
```
cause The `gulp` object was not correctly imported or available in the scope where `gulp-live-server` is used.

fix Ensure `var gulp = require('gulp');` is present at the top of your `gulpfile.js` and `gulp` is installed as a development dependency (`npm install --save-dev gulp`).

Warnings

breaking This package is CommonJS-only and does not support ES Modules. Attempting to import it directly in an ESM context (e.g., `"type": "module"` in `package.json` or `.mjs` files) will result in import errors.
Fix: Ensure your `gulpfile.js` uses CommonJS `require()` syntax. If your project uses ESM for other parts, you may need to keep `gulpfile.js` as a `.js` file without `"type": "module"` set, or restructure your Gulp setup to handle CJS dependencies.
gotcha When restarting the server via `gulp.watch`, directly binding `server.start` might lead to a `TypeError: Bad argument` due to how `ChildProcess.spawn` handles the `this` context.
Fix: Wrap `server.start.bind(server)` in an anonymous function to ensure correct context: `gulp.watch('myapp.js', function() { server.start.bind(server)() });`.
gotcha This package is effectively abandoned, with its last release over 7 years ago. It may contain unpatched security vulnerabilities, suffer from compatibility issues with newer Node.js versions or dependencies, and is not actively maintained. Consider modern alternatives.
Fix: Evaluate alternative Gulp plugins for live-reloading and static servers, such as `browser-sync` or `gulp-connect`, which are actively maintained and provide similar or enhanced functionality for modern development workflows.

Install

npm install gulp-live-server npm
yarn add gulp-live-server yarn
pnpm add gulp-live-server pnpm

Imports

gls
wrong:
```
import gls from 'gulp-live-server';
```
correct:
```
const gls = require('gulp-live-server');
```
The package is CommonJS-only. Use `require()` for the main plugin instance.
gls.static
wrong:
```
import { static } from 'gulp-live-server';
```
correct:
```
const server = gls.static('public');
```
This method creates a server for serving static files. The package does not support ES Module named imports.
gls.new
wrong:
```
import { new } from 'gulp-live-server';
```
correct:
```
const server = gls.new('myapp.js');
```
This method starts a server by running a custom Node.js script. The package does not support ES Module named imports.

Quickstart

This quickstart demonstrates how to set up `gulp-live-server` to serve static files from one or multiple directories and configure live-reloading upon file changes.

const gulp = require('gulp');
const gls = require('gulp-live-server');

gulp.task('serve-static', function() {
  // 1. Serve with default settings (serves 'public' folder on port 3000)
  const server = gls.static();
  server.start();

  // 2. Serve at a custom port for 'dist' folder
  const customPortServer = gls.static('dist', 8888);
  customPortServer.start();

  // 3. Serve multiple folders
  const multiFolderServer = gls.static(['dist', '.tmp']);
  multiFolderServer.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]);
    customPortServer.notify.apply(customPortServer, [file]);
    multiFolderServer.notify.apply(multiFolderServer, [file]);
  });
});

// To run: `gulp serve-static`

view raw JSON →