Grunt Livereload and MAMP - gruntjs

Question

I'm trying to use gruntjs livereload with a wordpress theme development.
For WP theme development I would normally use MAMP and view the site at localhost in the browser.
If I'm using grunt to create a server do I still need MAMP running.
Do I still need the wordpress folder in the MAMP root folder to connect to the database.
I'm using this simple gruntfile.js that is in the root of the wordpress folder but if I run grunt the browser loads but loads a search engine searching for 0.0.0.0
'use strict';
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
connect: {
options: {
port: 9000,
},
livereload: {
options: {
open: true,
}
}
}
});
grunt.registerTask('default', ['connect']);
}
Is it possible to use grunt livereload with Wordpress without using MAMP.
I've been trying to work this out all day - any help would be greatly appreicated.

Answer 1

Hey so I was also running into this issue and I couldn't get it to work? I feel it has something to do with the fact that MAMP runs your PHP server on a different port. Perhaps you can make your default to port 35729 because that's where the script lives
A really hackish workaround I did was I created a little PHP script that inserts itself when on localhost. I also check to make sure a variable is declared.
livereload.php
<?php
// Live reload script added only on localhost and if $livereload set to true
// add specific whitelist options
$whitelist = array(
'127.0.0.1',
'::1',
'localhost'
);
if(in_array($_SERVER['REMOTE_ADDR'], $whitelist) && isset($livereload)){
echo '<script src="http://localhost:35729/livereload.js?snipver=1"></script>';
}
?>
In my main PHP file, I would do something like
index.php
<?php
$livereload = true;
?>
// Markup, content
<?php
include_once('livereload.php');
?>
Hope this helps.

Answer 2

I'm not sure I understood your problem completely, but you won't be able to run wordpress on "grunt" server, cause node server is in JS and does not support PHP nor mysql (out of the box at least), i can help you to have a working mamp + watch setup
so to have a proper setup including mamp and grunt taking your example as a basis
'use strict';
module.exports = function(grunt){
require('load-grunt-tasks')(grunt);
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
watch: {
options: {
livereload: true,
},
files: {
files: ['theDirYouWantToReload/*.scss'], // or whaterver globbing pattern you would need
tasks: ['yourNeededTask'],
},
}
});
grunt.registerTask('default', ['watch']);
}
you should have a look at grunt-watch-repo for additional information on how watch and reload works.
this was the grunt part, on the WP side you should add the livereload script to your pages
2 solution here, use the browser's extension of LR, and activate it on the browser when you look at these pages, or add the live reload script to WP enqueue
the default address of the script is http://localhost:35729/livereload.js?snipver=1
this is a barebone example, you can fine grain actions on the watch task.