How-to: supersmooth browser reload on css/html changes

Themes
1

You have a local development Ghost 2.0 running on your machine - using ghost start.

You also have a copy of the Caspar 2.0 theme which you are wildly hacking to your needs, with Gulp running the default task with css and hbs watcher, building screen.css when you save edits. Nice.

You fire up your browser on localhost:2368 and find your Ghost site. Yay!

But, the browser does not reload when you edit the .hbs and .css files.
Gulp rebuilds the files but the browser does not reload. Frustrating.

A very elegant and supersmooth solution is to add a script to default.hbs, just above the {{ghost_head}} tag in <HEAD>

<script type="text/javascript" src="http://livejs.com/live.js"></script>

That’s it. Any changes to HTML or .js files now reloads the browser.
CSS-changes are applied without reload, they just happen.

Remember to remove live.js when you deploy to production…
Live.js written by Martin Kool (@mrtnkl).

Thank you to Charles Roper at Stack Overflow for sharing this.

1 Like
2

Thanks for sharing this!

Just wanted to let you know, that *.hbs livereloading is now build into Casper@2.9.10, see this commit here

3

Gulp syntax is somewhat… ahem… challenging but if I read this correctly live-reload is part of the pipeline. Also uses new parallel processing - good news!

I figured out how to prevent live.js from loading on production after a gulp zip, this goes in <HEAD>

<script type="text/javascript" />
    if (window.location.hostname == "localhost") {
      var script = document.createElement('script');
      script.src = 'http://livejs.com/live.js';
      document.write(script.outerHTML);
    };
  </script />

Also, I found this to be useful - the only word I struggle with more is collegue/collouege/coll…
parallel-small

4

I’m new to the world of Ghost and Gulp. I just made a fresh local install of Ghost, and was disappointed, that it does not refresh my browser after I save a .hbs or .css file. Thanks for your code @mheland, it works with Ghost v3.3.0 and Caspar v3.0.6.