tessl/npm-livereload

LiveReload server for monitoring files and automatically reloading web browsers

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

File Watching

Name: tessl/npm-livereload
Author: tessl

File system monitoring capabilities with configurable extensions, exclusion patterns, and polling options for network file systems.

Capabilities

Default File Extensions

LiveReload watches specific file extensions by default.

/**
 * Default file extensions that trigger browser reload
 */
const DEFAULT_EXTENSIONS = [
  'html', 'css', 'js', 'png', 'gif', 'jpg',
  'php', 'php5', 'py', 'rb', 'erb', 'coffee'
];

Live Reload Behavior

LiveReload has different reload behaviors for different file types:

CSS files: When applyCSSLive is true (default), CSS files are reloaded without a full page refresh
Image files: When applyImgLive is true (default), image files (jpg, jpeg, png, gif) are reloaded without a full page refresh
Other files: All other file types trigger a full page refresh

/**
 * Configure live reload behavior for CSS and images
 */
const server = livereload.createServer({
  applyCSSLive: true,   // CSS live reload (default: true)
  applyImgLive: true    // Image live reload (default: true)
});

Default Exclusions

Certain directories are excluded from watching by default.

/**
 * Default regex patterns for excluded directories
 */
const DEFAULT_EXCLUSIONS = [
  /\.git\//,    // Git repository files
  /\.svn\//,    // Subversion files  
  /\.hg\//      // Mercurial files
];

Extension Configuration

Control which file types trigger browser reloads.

/**
 * Configure file extensions to watch
 */

// Replace default extensions entirely
const server = livereload.createServer({
  exts: ['html', 'css', 'js']  // Only watch these types
});

// Add additional extensions to defaults  
const server = livereload.createServer({
  extraExts: ['scss', 'less', 'tsx']  // Adds to default list
});

Usage Examples:

const livereload = require('livereload');

// Watch only HTML and CSS files
const server = livereload.createServer({
  exts: ['html', 'css']
});

// Watch default extensions plus additional ones
const server = livereload.createServer({
  extraExts: ['md', 'txt', 'json']
});

// Note: extraExts overrides exts if both are provided
const server = livereload.createServer({
  exts: ['html'],           // This gets ignored
  extraExts: ['scss', 'js'] // Results in: scss, js + defaults
});

Exclusion Patterns

Configure which files and directories to ignore.

/**
 * Configure exclusion patterns
 * @param exclusions - Array of RegExp patterns to exclude
 */
const server = livereload.createServer({
  exclusions: [
    /node_modules\//,
    /\.tmp$/,
    /\.log$/
  ]
});

Usage Examples:

// Exclude specific directories and file types
const server = livereload.createServer({
  exclusions: [
    /node_modules\//,
    /dist\//,
    /build\//,
    /\.backup$/,
    /~$/
  ]
});

// Exclusions are appended to defaults, not replaced
// So .git/, .svn/, .hg/ are always excluded

Specific File Monitoring

Watch specific filenames regardless of extension.

/**
 * Configure specific filenames that trigger reload
 * @param filesToReload - Array of filenames to watch
 */
const server = livereload.createServer({
  filesToReload: ['index.html', 'config.json', 'Makefile']
});

Usage Examples:

// Watch specific files by name
const server = livereload.createServer({
  filesToReload: [
    'index.html',    // Any index.html in any directory
    'config.js',     // Any config.js file  
    'Dockerfile'     // Dockerfiles (no extension)
  ]
});

// Useful for files without extensions or special files
const server = livereload.createServer({
  exts: ['js'],
  filesToReload: ['Makefile', 'README', '.env']
});

Polling Mode

Use polling instead of file system events for network drives.

/**
 * Enable polling for file system changes
 * @param usePolling - Set to true for network file systems
 */
const server = livereload.createServer({
  usePolling: true
});

Usage Examples:

// For network drives or Docker volumes
const server = livereload.createServer({
  usePolling: true,
  debug: true  // See polling activity in logs
});

// Polling is more resource intensive but works reliably
// across different file systems and network mounts

Watch Multiple Paths

Monitor multiple directories or glob patterns.

/**
 * Watch multiple paths simultaneously
 * @param paths - String or array of paths/patterns to watch
 */
server.watch(paths);

Usage Examples:

const server = livereload.createServer();

// Watch multiple specific directories
server.watch([
  __dirname + '/public',
  __dirname + '/assets',
  __dirname + '/templates'
]);

// Watch with glob patterns
server.watch([
  './src/**/*.js',
  './styles/**/*.css',
  './public/**/*.html'
]);

// Mix of directories and patterns
server.watch([
  './public',           // Entire directory
  './src/**/*.js',      // JS files in src tree
  './config.json'       // Specific file
]);

Delay Configuration

Add delay between file change detection and browser notification.

/**
 * Configure delay before notifying browser
 * @param delay - Milliseconds to wait after file change
 */
const server = livereload.createServer({
  delay: 1000  // Wait 1 second
});

Usage Examples:

// Useful for build processes that take time
const server = livereload.createServer({
  delay: 2000,  // Wait 2 seconds after change
  debug: true
});

// Prevents premature reloads during compilation
server.watch('./src');

// Without delay, browser might reload before
// build process completes the file changes

File Change Detection

Internal Filter Logic

LiveReload uses internal logic to determine if a file change should trigger a reload:

Extension Check: File extension must be in the exts array
Filename Check: Filename must be in the filesToReload array
Exclusion Check: File path must not match any exclusion patterns
Delay Processing: If delay is configured, waits before triggering

File System Events

Uses chokidar internally to monitor these events:

add: New file created
change: Existing file modified
unlink: File deleted

All three events can trigger browser reloads depending on configuration.

Advanced Configuration

Combining Options

// Comprehensive file watching configuration
const server = livereload.createServer({
  // Watch TypeScript and SCSS in addition to defaults
  extraExts: ['ts', 'tsx', 'scss'],
  
  // Exclude build artifacts and temp files
  exclusions: [
    /node_modules\//,
    /\.tmp$/,
    /build\//,
    /dist\//
  ],
  
  // Watch config files specifically
  filesToReload: ['webpack.config.js', 'package.json'],
  
  // Use polling for Docker/VM environments
  usePolling: process.env.NODE_ENV === 'docker',
  
  // Delay for build processes
  delay: 500,
  
  // Debug file watching
  debug: true
});

server.watch('./src');

Network File Systems

// Optimized for network drives and containers
const server = livereload.createServer({
  usePolling: true,
  debug: true,
  delay: 1000  // Higher delay for network latency
});

Development vs Production

// Different configs for different environments
const isDev = process.env.NODE_ENV === 'development';

const server = livereload.createServer({
  debug: isDev,
  usePolling: process.platform === 'win32' || isDev,
  delay: isDev ? 0 : 1000,
  extraExts: isDev ? ['scss', 'ts'] : []
});