Automating Live Reload, see also Minimal Server setup
LiveReload monitors changes in your files and instantly updates all changes in your browser. It is very useful when you are updating your site and don't want to keep manually reloading the page in your browser again and again after every edit.
Surprisingly there seems to be lack of simple clean working solutions that are easy to install, maintain and customize.
Many of them are based on installing a Chrome browser extension. However, in addition to being limited to the Chrome browser, extensions are potentially vulnerable. Extensions can also be guilty to slow down your browser, by adding unnecessary and slow running scripts blocking your useful content. As extension runs on every page in your browser, it doesn't seem to be a good fit for the purpose of LiveReload.
Other solutions are based on manually adding a script tag inside your HTML file. This adds to the maintenance headache to remember removing it from your production code, among others.
Both extension and extra tags are completely unnecessary!
Dead simple way to enjoy LiveReload!
Download this Repository, unzip it and change to the created subdirectory
That's it! Now start your Local Server, LiveReload and your Browser pointing to the right location with one single command in your terminal:
Is LiveReload all it can do?
This is where the Gulp.js automating system shines at its best. It has great rapidly growing community proving open source plugins for all possible tasks you can imagine. Just google "gulp" with whatever task you want ;)
Gulpfile.js to edit and add more tasks or write a new one!
How is LiveReload working?
The watcher part (
gulp task "watch") listens for file changes and sends notification to the LiveReload server (running by default at port
connect server at port
gulp task "connect") injects the following script into your HTML:
That way your browser listens to the LiveReload server and reacts to change notifications. See here for more technical details on how the LiveReload protocol works.
Now enjoy and read more tips in that file that loads in your browser!
Are you still here? No, we won't tell what else you see there until you do it ;-)
What is the point of this solution?
- To set you up and running with working LiveReload in minimal possible time, with minimum steps.
- To provide the simple commented configuration file
Gulpfile.js, where you can see all "magic" happen and how you can adapt it to your needs. For easy learning and playing :-)
- To show the power of Gulp.js and Node.js.
What about other LiveReload solutions that work great?
This is not only about LiveReload!
Have a look at the simple
Gulpfile.js and extend it to work hard for
many other tasks to save your time in the future.
- Why are the Node.js packages are included?
For the same reason that batteries are included when you buy a camera :=)
It is more convenient for folks less used to Node.js to get them up and running quicker.
The packages included are tested.
Installing all packages locally instead with
npm install should work too.