I’ve started working on a project to learn and use ES6 Modules, Angular, and Gulp, and one of the first issues I encountered was getting LiveReload to work, refreshing my browser every time I changed a file. For those not familiar with the concept, LiveReload works in one of three ways (from the LiveReload FAQ):
- either add a script tag into your HTML code manually, or
- install a browser extension (that, when activated, adds the script tag to the visited pages on the fly), or
- use a plugin for your web framework (that adds the script tag on the fly when serving requests).
This way, whenever any file in the directory is changed, LiveReload notifies the browser and the page refreshes. This, combined with other gulp tasks and build tools, makes working with single page applications and even normal HTML websites a lot quicker, especially if you have your browser on one monitor and your IDE on another. I tried using several other solutions including express with connect-livereload, but gulp-webserver was the plugin that worked the best!