1 comment

1. I had to somewhat solve this issue for the company where I work.

   The result of that work can be found here: https://github.com/MozaikAgency/wp-theme-bootstrap Feel free to browse, use and contribute 🙂

   Note: The following does not specifically refer to MAMP because if you have node and gulp installed on your system it will work irrespective of where the site itself is being hosted/running from. The server running WordPress and the server that browser-sync will spin up are separate and unrelated. For reference we use this alongside XAMP at work to develop our WP themes

   Specifically we wanted to have a development environment with all the bells and whistles (and that definitely includes browser-sync), but have a built theme that was clean from development cruft (browser-sync snippets, gulpfile.js etc).

   The idea is, you would write only in the dev theme, let’s say wp-contents/themes/example-theme_dev, and gulp would handle everything it needs to do, to generate the built theme, into let’s say wp-content/themes/example-theme.

   Note: This is not a tutorial, just an overview of some things that should be happening to get browser-sync to work with a WordPress setup. You can check out the repo itself to see the full way we tied everything together.

   Browser-Sync Implementation

   Since we are anyway moving files over from the “dev theme” to the “built theme” we get a chance to transform those files before shifting them over.

   During dev mode (default gulp task), one of the transformations will specifically inject the following snippet into the bottom of your theme’s functions.php

   /**
    * DEVELOPMENT MODE ONLY
    *
    * Browser-sync script loader
    * to enable script/style injection
    *
    */
   add_action( 'wp_head', function () { ?>
       <script type="text/javascript" id="__bs_script__">//<![CDATA[
           document.write("<script async src='http://HOST:3000/browser-sync/browser-sync-client.js'></script>".replace("HOST", location.hostname));
       //]]></script>
   <?php }, 999);
   

   This action will print out a script into your theme’s head to link up to the browser-sync server and will handle all page refresh/injections your build process throws at it.

   The actual server that this script points to is booted when you run the following gulp task (also called with the default gulp task):

   var browserSync = require('browser-sync');
   
   /**
    * Spin up the browser-sync
    * socket server to listen for
    * and push code changes to the
    * browser
    *
    */
   module.exports = function (done) {
     browserSync({
       logSnippet: false,
       server: false,
       open: false,
       reloadDelay: 100,
       reloadDebounce: 100
     });
   
     done();
   };
   

   So, you have your browser-sync server up and running and your theme can now update automatically using the script snippet, now all that is left is telling browser-sync what it should update and when.

   For this, I found that the best way to approach it was to explicitly tell browser-sync to update right after any transforming gulp tasks, like sass to css processing, were done running. Mostly you just need to add the following to the end of your gulp tasks:

   .on('end', browserSync.reload);
   

   where browserSync is simply:

   var browserSync = require('browser-sync');
   

   Wrap up

   This answer covers the basics you’ll need to get browser-sync into your WP workflow. You can check out the wp-theme-bootstrap repo where we put all of this together to see the entire picture of how it works and try it out for yourselves, if you are interested.

   We’ve been using this successfully now at the company for a while now. Hope you find it useful and if you have any suggestions feel free to chime in.

   Log in to Reply