Browser refresh nodeJS integration

Simple yet powerful utility to integrate browser-refresh nodeJS module so that browser(s) with open Drupal site(s) refreshes just styles or images if any of them change during development. This is really easy to install and saves so much time especially during theme development as the refresh only updates the required elements and is not a full page refresh. The latter not only utilises your local web server but also the browser requires a lot of resources when doing a full page reload for every single change in your css files.

With browser-refresh all that is gone! Change your CSS - save it - boom - your changes will be updated immediately in you browser or even in multiple browsers simultaneously.

How does it work together with pre-processors? No worries, it just works. Let's assume you're developing your theme based on SASS, then you're editing your sass or scss files and the pre-processor of your choice is updating the target css file which is then picked up by browser-refresh and updated in your browser(s) almost in real-time!

Installation

Simply install this module and its dependencies (see below) on your development site (there is no need for this on production sites) and enable it.

In addition, you need to install node (nodeJS) and you'll find instructions for your OS on node's main site.

To run browser-refresh later on, there are a couple of NPM dependencies which will be installed automatically, so you don't have to worry about that.

Dependencies

• Link CSS: This modules links all the CSS files instead of importing them as Drupal does by default. Linking CSS files is necessary because browser otherwise couldn't re-load them dynamically.

Usage

There is not much you need to be doing. Just start the browser-refresh service and then open (or once refresh manually) the Drupal site in your browser or even multiple browsers at the same time.

To start this service you need to be using Drush (for Drupal 7 or for Drupal 8) or you can use DrupalConsole for Drupal 8.

Drush

This is available for both, Drupal 7 and Drupal 8, and currently supports the following commands:

• drush browser-refresh-start (brstart): This will start the service but only if it is not yet started.
• drush browser-refresh-stop (brstop): This will stop the service but only if it is started.
• drush browser-refresh-status (brstatus): Display the current status of the service.
• drush browser-refresh-restart (brrestart): First stop and then start the service.

DrupalConsole

This is available for Drupal 8 only and currently supports the following commands:

• drupal browser-refresh:start: This will start the service but only if it is not yet started.
• drupal browser-refresh:stop: This will stop the service but only if it is started.
• drupal browser-refresh:status: Display the current status of the service.
• drupal browser-refresh:restart: First stop and then start the service.

Any question, ideas, bugs, fixes or else you want to express? Great, we're looking forward to hearing from you in the issue queue.