YeoPress and LiveReload

Once you have setup your database and run YeoPress to scaffold out your WordPress site you should have a template installed with a Gruntfile.js. For the rest of this page we are going to assume you used the default YeoPress theme, or something with a similar configuration. If you take a look in the wp-content/themes/your-theme/functions.php file you will see something like this in thetheme_enqueue_scripts function:

wp_register_script('livereload', 'http://yourserver.com:35729/livereload.js?snipver=1', null, false, true);

This line loads the required javascript to run LiveReload. This script is served up by the grunt-contrib-livereload task on whichever server you have setup YeoPress on, over a custom port specified in the LiveReload grunt task. This port also serves the websocket connection that LiveReload uses to to refresh the page when files are changed. Make sure that the url is correct (matches where your WordPress install is located) and that the port number (the part like this :35729) matches the number that is output when you start the grunt task.

Ok, so now that you have the script tag on the page, change directory into your theme directory and start the grunt task:

$ cd wp-content/themes/your-theme
$ grunt

The output from this command should look like:

Running "livereload-start" task
... Starting Livereload server on 35729 ...

Running "regarde" task
Watching scss/**/*.scss
Watching js/**/*.js
Watching **/*.php

As you can see, the default port (35729) matches the number in your script tag. Now refresh your WordPress page and you should see the livereload.js script load. Now if you edit a file in your theme, everything should update. Yeah!!