Hot Reloading

[csalmeida]

This update allows the browser to refresh automatically when changes are made to either:

• Styles (.scss)
• Scripts (.js)
• Markup (.twig, .php)

This includes php files as there can be edge cases where markup could be present or a refresh would be useful whilst editing them.

To use hot reloading a variable in gulpfile.js needs to be edited to match the web server being used locally. This variable is provided since the way developers setup their servers might vary:

const browserSyncProxy = 'localhost:3000'

Hot reloading is optional, if the proxy value is null, Hozokit will watch changes without making use of reloading capabilities:

const browserSyncProxy = null

This will result in the following output:

🛑 Hot reloading is not available. Add the address of your server to browserSyncProxy in gulpfile.js
Find examples of proxies at: https://www.browsersync.io/docs/options/#option-proxy
Files will still be watched and compiled.

This also comes with the added benefit of running the site from a local machine in other devices on the same network. This has been known to be problematic in Wordpress development due to URL issues but now it could be as simple as using the external URL provided in the terminal:

 Local: http://localhost:3000
 External: http://192.168.0.18:3000 # Use this to test the site on your phone (as long as it is in the same network).

Changes:

• Watch script will execute a build before it starts watching for changes. This means that any saved changes made before the script is executed will now apply.
• Page will now reload if a change is made to styles, scripts or markup. Implemented using BrowserSync.
• Hot reloading is optional. If not proxy is set, changes will be watched as usual but won't perform a reload. This is an attempt of not breaking for anyone not adding the proxy value.