Skip to content

gulp-connect

gulp-connect is a plugin for the [[Gulp]] task runner used to launch a local development server with support for LiveReload.^[600-developer__frontend__fe-tools__glup-livereload.md]

Overview

The plugin is primarily used to serve static files from a specified directory and automatically refresh the browser when changes are detected.^[600-developer__frontend__fe-tools__glup-livereload.md] In a typical frontend development workflow, it is often used in conjunction with other plugins like gulp-livereload to handle the browser refresh logic.^[600-developer__frontend__fe-tools__glup-livereload.md]

Installation

To use the plugin, it must be installed as a development dependency:

npm install gulp-connect --save-dev
^[600-developer__frontend__fe-tools__glup-livereload.md]

Configuration

The connect.server() method accepts an options object to configure the server's behavior:

  • root: Specifies the directory path to serve static files (e.g., the source folder).^[600-developer__frontend__fe-tools__glup-livereload.md]
  • port: Defines the TCP port for the server (e.g., 3000).^[600-developer__frontend__fe-tools__glup-livereload.md]
  • host: Sets the hostname (e.g., localhost).^[600-developer__frontend__fe-tools__glup-livereload.md]
  • livereload: A boolean flag to enable or disable the LiveReload feature on the server.^[600-developer__frontend__fe-tools__glup-livereload.md]

Usage Example

The following configuration demonstrates a standard gulpfile.js setup that defines a connect task to start the server and a watch task to monitor for file changes^[600-developer__frontend__fe-tools__glup-livereload.md].

var gulp = require('gulp');
var connect = require('gulp-connect');

var config = {
    src : 'src'
};

gulp.task('connect', function() {
  connect.server({
        root: config.src,
        port: 3000,
        host: 'localhost',
        livereload: true
  });
});

gulp.task('watch', function () {
    // Monitor specific file types
    gulp.watch([config.src + '/*.html'], ['reload']);
    gulp.watch([config.src + '/*.js'], ['reload']);
});

Sources

  • 600-developer__frontend__fe-tools__glup-livereload.md