livereload
Advanced tools
The livereload npm package allows developers to automatically refresh the browser whenever files are modified. This is particularly useful for web development, as it speeds up the development process by eliminating the need to manually refresh the browser to see changes.
Automatic Browser Refresh
This feature sets up a LiveReload server that watches the specified directory (in this case, the 'public' directory). Whenever a file in this directory changes, the server will automatically refresh the browser.
const livereload = require('livereload');
const server = livereload.createServer();
server.watch(__dirname + '/public');Custom File Extensions
This feature allows you to specify custom file extensions to watch. In this example, the server will only watch for changes in files with the extensions 'html', 'css', and 'js'.
const livereload = require('livereload');
const server = livereload.createServer({ exts: ['html', 'css', 'js'] });
server.watch(__dirname + '/public');Excluding Files and Directories
This feature allows you to exclude certain files or directories from being watched. In this example, the server will ignore files with the '.map' extension and anything in the 'node_modules' directory.
const livereload = require('livereload');
const server = livereload.createServer({ exclusions: ['*.map', 'node_modules/**'] });
server.watch(__dirname + '/public');BrowserSync is a powerful tool for synchronizing file changes across multiple devices and browsers. It offers more features than livereload, such as synchronized scrolling, form replication, and a user interface for controlling the server. However, it is also more complex to set up and configure.
Webpack Dev Server is a development server that provides live reloading and hot module replacement. It is tightly integrated with Webpack, making it a great choice for projects that already use Webpack for module bundling. It offers more advanced features like hot module replacement, which livereload does not.
Gulp-livereload is a plugin for Gulp that integrates livereload functionality into Gulp tasks. It is a good choice for projects that use Gulp as their task runner, providing a seamless way to add live reloading to the build process.
An implementation of the LiveReload server in Node.js. It's an alternative to the graphical http://livereload.com/ application, which monitors files for changes and reloads your web browser.
First, install the LiveReload browser plugins by visiting http://help.livereload.com/kb/general-use/browser-extensions.
To use livereload from the command line:
$ npm install -g livereload
$ livereload [path]
Or to use the api within a project:
$ npm install livereload
Then, simply create a server and fire it up.
livereload = require('livereload');
server = livereload.createServer();
server.watch(__dirname + "/public");
You can also use this with a Connect server:
connect = require('connect');
connect.createServer(
connect.compiler({ src: __dirname + "/public", enable: ['less'] }),
connect.staticProvider(__dirname + "/public")
).listen(3000);
livereload = require('livereload');
server = livereload.createServer({exts: ['less']});
server.watch(__dirname + "/public");
Watching multiple paths:
Passing an array of paths will allow you to watch multiple directories. All directories have the same configuration options.
server.watch([__dirname + "/js", __dirname + "/css"]);
Using originalPath option:
// server.js
var server = livereload.createServer({
originalPath: "http://domain.com"
});
server.watch('/User/Workspace/test');
$ node server.js
<!-- html -->
<head>
<link rel="stylesheet" href="http://domain.com/css/style.css">
</head>
When /User/Workspace/test/css/style.css modified, the stylesheet will be reload.
The commandline options are
-p or --port to specify the listening port-i or --interval to specify the listening interval in milliseconds. Default is 1000.Specify the path when using the options.
$ livereload . -i 200
The createServer() method supports a few basic options, passed as a JavaScript object:
https is an optional object of options to be passed to https.createServer (if not provided, http.createServer is used instead)port is the listening port. It defaults to 35729 which is what the LiveReload extensions use currently.exts is an array of extensions you want to observe. The default extensions are html, css, js, png, gif, jpg,
php, php5, py, rb, erb, and "coffee."applyJSLive tells LiveReload to reload JavaScript files in the background instead of reloading the page. The default for this is false.applyCSSLive tells LiveReload to reload CSS files in the background instead of refreshing the page. The default for this is true.exclusions lets you specify files to ignore. By default, this includes .git/, .svn/, and .hg/originalPath Set URL you use for development, e.g 'http:/domain.com', then LiveReload will proxy this url to local path.overrideURL override the stylesheet href with your set.Right now this is extremely simple. It relies on polling so there's a delay in refreshing the browser. It could be faster.
Copyright (c) 2010-2014 Brian P. Hogan and Joshua Peek
Released under the MIT license. See LICENSE for details.
FAQs
LiveReload server
The npm package livereload receives a total of 143,622 weekly downloads. As such, livereload popularity was classified as popular.
We found that livereload demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
RubyGems.org has added a new "maintainer" role that allows for publishing new versions of gems. This new permission type is aimed at improving security for gem owners and the service overall.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.