Merge pull request #7 from csalmeida/hot-reloading

Hot Reloading

README.md

@@ -14,6 +14,7 @@ This is not a library but rather an initial setup to jumpstart the development o
 ## Documentation
 
 - [Creating Custom Blocks](/docs/blocks.md)
+- [Enabling Hot Reload](/docs/hot_reload.md)
 
 ## Requirements
 
@@ -87,6 +88,7 @@ npm run build
 ```
 > See `gulpfile.js` for all tasks.
 
+[Hot Reloading can be enabled](/docs/hot_reload.md) once the steps above have been followed.
 
 # Customizing the theme
 

docs/hot_reload.md

@@ -0,0 +1,35 @@
+# Enabling Hot Reload
+
+Hot reloading is a feature that is opt-in at the moment. This is because this feature needs to know the url of the server.
+Developers might setup their server differently so this needs to be configured when installing Hozokit.
+
+> Please follow the setup section of the README before following this guide.
+
+## Configure your proxy
+
+Follow these steps if hot reloading is something you would like to enable.
+
+1. Find the url of you local Wordpress instalation for your project. This will be `localhost:3000` in a lot of cases but it could also be something custom such as `hozokit.test`
+2. Set that url without the `http://` as a value of `browserSyncProxy`. This variable can be found in `gulpfile.js`.
+
+Here's how a proxy value can look like in `gulpfile.js`: 
+
+```javascript
+const browserSyncProxy = 'localhost:3000'
+```
+
+3. Run `npm start` to start watching files. Every time a file is saved it should reload the page. 
+
+> The url on the browser might be `http://localhost:2077` even if it wasn't before hot reloading was enabled. This is correct, it means browser-sync is working correctly.
+
+## What happens when hot reloading is not configured
+
+This is the default, and it won't break anything. When `browserSyncProxy` is set to `null`, the following message will be displayed in the terminal:
+
+```bash
+🛑 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 means hot reloading will be disabled but files will still be watched as changes are made.

wp-content/themes/hozokit/gulpfile.js

@@ -8,6 +8,26 @@ const rollup = require('rollup')
 const rollupTerser = require('rollup-plugin-terser')
 const rollupResolve = require('@rollup/plugin-node-resolve')
 const rollupBabel = require('rollup-plugin-babel')
+const browserSync = require('browser-sync').create();
+
+
+/*
+  Enables Hot Reloading
+  Needs to be configured to the server being used. example hozokit.test or localhost:3000
+*/
+
+// Change this to where your webserver points to.
+const browserSyncProxy = null
+// Used to reload browser when changes are made.
+const hotReload = browserSync.reload
+
+/*
+  Tasked with reloading the browser window everytime there are changes.
+*/
+gulp.task('hot-reload', function (done) {
+  browserSync.reload();
+  done();
+});
 
 /*
   Transpiles JavaScript files using Rollup.
@@ -65,6 +85,16 @@ const stylesheetWatchPaths = [
   '!styles/temp.scss'
 ]
 
+/* 
+ * Watches changes in .twig and php files.
+ * php is included because it could include markup
+ * or reason to reload in some edge cases. 
+*/
+const markupWatchPaths = [
+  'templates/**/*.twig',
+  '**/*.php',
+]
+
 /* Compiles a style.css for the front facing side of the site. */
 gulp.task('styles', () => {
   return gulp.src(stylesheetCompilePaths)
@@ -93,9 +123,37 @@ gulp.task('block-styles', () => {
 
 /* Registers changes in scrips and sass files. */
 gulp.task('watch', () => {
-  gulp.watch('scripts/*.js', gulp.series('scripts'));
-  gulp.watch(stylesheetWatchPaths, gulp.series(['styles', 'block-styles']));
+  if (browserSyncProxy != null && typeof(browserSyncProxy) != 'undefined') {
+    // Initiates Browser Sync to allow hot reloading when watching files.
+    browserSync.init({
+      proxy: browserSyncProxy,
+      port: 2077,
+      ui: {
+        port: 2020
+      }
+    })
+
+    gulp.watch('scripts/*.js', gulp.series('scripts'))
+    .on("change", hotReload)
+
+    gulp.watch(stylesheetWatchPaths, gulp.series(['styles', 'block-styles']))
+    .on("change", hotReload)
+
+    gulp.watch(markupWatchPaths)
+    .on("change", hotReload)
+  } else {
+    // Informs that hot reloading is not available.
+    console.info('\n🛑 Hot reloading is not available. Add the address of your server to browserSyncProxy in gulpfile.js')
+    console.info('Find examples of proxies at: https://www.browsersync.io/docs/options/#option-proxy')
+    console.info('Files will still be watched and compiled.\n')
+
+    gulp.watch('scripts/*.js', gulp.series('scripts'))
+    gulp.watch(stylesheetWatchPaths, gulp.series(['styles', 'block-styles']))
+  }
 })
 
 /* Compiles all files. */
-gulp.task('build', gulp.series(['scripts', 'styles', 'block-styles']))
+gulp.task('build', gulp.series(['scripts', 'styles', 'block-styles']))
+
+/* The default task builds styles and scripts before watching. */
+gulp.task('default', gulp.series(['build', 'watch']))