Skip to content

Gulp LiveReload Workflow

The Gulp LiveReload Workflow utilizes gulp-connect and gulp-livereload to automate browser refreshing during development. This setup allows developers to view changes in real-time without manual intervention, typically running on a local server (e.g., localhost:3000).^[600-developer__frontend__fe-tools__glup-livereload.md]

Installation

To implement this workflow, three primary npm packages are required as development dependencies^[600-developer__frontend__fe-tools__glup-livereload.md]:

  • gulp
  • gulp-connect
  • gulp-livereload

Gulp Configuration

The gulpfile.js must define specific tasks to handle the server connection, file watching, and reloading process^[600-developer__frontend__fe-tools__glup-livereload.md].

Connect Task

The connect task starts the HTTP server with LiveReload enabled^[600-developer__frontend__fe-tools__glup-livereload.md]. 

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

Watch Task

The watch task initiates the gulp-livereload listener and monitors specific file types^[600-developer__frontend__fe-tools__glup-livereload.md]. 

gulp.task('watch', function () {
  livereload.listen({
    start: true,
    basePath: config.src
  });

  // Watch specific directories
  gulp.watch([config.src + '/*.html'], ['reload']);
  gulp.watch([config.src + '/*.js'], ['reload']);
});

Reload Task

The reload task triggers the actual refresh event in the browser when changes are detected^[600-developer__frontend__fe-tools__glup-livereload.md]. 

gulp.task('reload', function () {
  gulp.src([config.src + '/*.*'])
    .pipe(livereload());
});

Default Task

The default task aggregates the necessary processes to start the development environment^[600-developer__frontend__fe-tools__glup-livereload.md]. 

gulp.task('default', ['connect', 'watch' ,'reload']);

Execution

The workflow is typically initiated via a script command in package.json, such as npm run dev, which executes the default Gulp task^[600-developer__frontend__fe-tools__glup-livereload.md].

Sources

^[600-developer__frontend__fe-tools__glup-livereload.md]