1. rollup-plugin-livereload
Rollup plugin for LiveReload that watches the bundle and reloads the page on change
rollup-plugin-livereload
Package: rollup-plugin-livereload
Created by: thgh
Last modified: Sun, 26 Jun 2022 14:00:03 GMT
Version: 2.0.5
License: MIT
Downloads: 259,302
Repository: https://github.com/thgh/rollup-plugin-livereload

Install

npm install rollup-plugin-livereload
yarn add rollup-plugin-livereload

Rollup plugin LiveReload

Software License Issues JavaScript Style Guide NPM Latest Version

Installation

npm install --save-dev rollup-plugin-livereload

Usage

 // rollup.config.js
import livereload from 'rollup-plugin-livereload'

export default {
  entry: 'entry.js',
  dest: 'bundle.js',
  plugins: [livereload()],
}

To make it a real dev-server, combine this plugin with rollup-plugin-serve.

 // rollup.config.js
import serve from 'rollup-plugin-serve'
import livereload from 'rollup-plugin-livereload'

export default {
  entry: 'entry.js',
  dest: 'bundle.js',
  plugins: [
    serve(), // index.html should be in root of project
    livereload(),
  ],
}

Options

By default, it watches the current directory. If you also have css output, pass the folder to which the build files are written.

livereload('dist')

// --- OR ---

livereload({
  watch: 'dist',
  verbose: false, // Disable console output

  // other livereload options
  port: 12345,
  delay: 300,
  https: {
      key: fs.readFileSync('keys/agent2-key.pem'),
      cert: fs.readFileSync('keys/agent2-cert.pem')
  }
})

Options are always passed to livereload.createServer()

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

Contributions and feedback are very welcome.

To get it running:

  1. Clone the project.
  2. npm install
  3. npm run build

Credits

License

The MIT License (MIT). Please see License File for more information.

Dependencies

RELATED POST

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Enhancing Vue.js Development: Harnessing the Potential of Vue-Loader

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Simplify Data Validation in Vue.js: A Step-by-Step Guide to Using Regex

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Troubleshooting Made Easy: Common Issues and Solutions with vue-loader Without vue-cli

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Optimizing Webpack 4 with Vue CLI 3: Disabling the Cache-Loader

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin

Step-by-Step Guide: How to Add a Function to Your Vuex Plugin