YeoPress and LiveReload

Once you have 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/footer.php file you will see something like this in the footer:

<script src="http://yourserver.com:35729/livereload.js?snipver=1"></script>

This line loads the required javascript to run LiveReload. Make sure that the url is correct 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!!