Grunt watch livereload not working on MAMP

Question

I am using grunt and I'm trying to get the watch/livereload task to run on my local server (MAMP) but with no success.

I'm calling the task based on HTML5 Boilerplate grunt files (https://github.com/h5bp/html5boilerplate.com/blob/master/Gruntfile.js, https://github.com/h5bp/html5boilerplate.com/blob/master/package.json).

I have also tried implementing Tiny-lr (https://github.com/mklabs/tiny-lr) without success either.

My connect and watch options right now are this

connect: {
    options: {
        hostname: 'localhost', 
        livereload: 35729,
        port: 8888              
    },
    livereload: {
        options: {
            base: '../',
            open: true
        }
    },
},
watch: {
    files: '<%= settings.dir.src %>/**',
    less: {
      files: ['src/less/*.less'],
      tasks: ['less'],
    },
    options: {
        livereload: '<%= connect.options.livereload %>'
    },
    scripts: {
        files: ['<%= settings.dir.src %>/js/*.js', 'css/**/*.scss' ],
        tasks: 'default',
        options: {
            spawn: false,
        }
    }
}

And here I declare the dev task:

// development task
grunt.registerTask('dev', [
  'connect:livereload',
  'watch'
]);

When I run 'grunt dev' my browser opens at http://127.0.0.1:8888/ and displays only this: Cannot GET /

I need my browser to open http://localhost:8888/ctrl/ (ctrl being the name of the folder project on MAMP, could be anything), I thought that changing the "base" option was the way to go but nope, it is not, and I cannot add "/ctrl" to host name either, nor to the port.

Any ideas? Thank you

Here is a link to my whole code: https://github.com/zolitariuz/ctrl

Answer 1

i think you are misunderstanding 2 tasks in grunt,

the connect task is used to create a http server spawned by node js, so no php nor mysql support, you DON'T want to run you WP site thru that.

the watch task is looking for changes in files on YOUR computer, launching the according task after a file change, then trigger the live reload.

you should remove connect completely after you copied the live reload object in your watch task.

the you should run your local lamp stack for running wp then start the watch task for file changes.

on the wp side you should enqueue the live reload script, or use a browser extension that will inject it for you.