Gulp livereload not working with MAMP

Question

I'm trying to set up gulp to run livereload using MAMP. Here is my gulpfile:

'use strict';

var gulp = require('gulp');
var del = require('del');
var sass = require('gulp-sass');
var livereload = require('gulp-livereload');

var paths = {
    elements: ['elements/**/*']
};

gulp.task('clear:cache', function () {
  return del(['core/cache/**/*']).then(function(){
    livereload();
    console.log('live reload called');
  }).catch(function(){
    livereload();
  });
});

gulp.task('sass', function () {
  console.log('sassy live reload');
  return gulp.src('assets/styles/scss/*.scss')
    .pipe(sass().on('error', sass.logError))
    .pipe(gulp.dest('assets/styles/css'))
    .pipe(livereload());
});

gulp.task('sass:watch', function () {
  gulp.watch('assets/styles/scss/*.scss', ['sass']);
});

// Rerun the task when a file changes 
gulp.task('watch', function() {
  livereload.listen({port:8888,host:"localhost",start:true, reloadPage:"index.php"});
  gulp.watch(paths.elements, ['clear:cache', 'sass:watch']);
});

// The default task (called when you run `gulp` from cli) 
gulp.task('default', ['sass:watch','clear:cache','watch']);

As you can see, the gulpfile is supposed to clear the cache and reload the browser whenever changes are made to files in the elements directory, and compile the sass and reload the browser whenever any scss files are changed. The cache clearing and sass compiling work fine, and both spit out the console.log messages in their respective functions.

Where I'm having trouble is getting livereload to reload the browser. I know that livereload is working but not targeting the browser at all, in fact, because I get messages in my terminal like /Applications/MAMP/htdocs/assets/styles/css/style.css reloaded.

Answer 1

By default the LiveReload extensions listens on port 35729. To use a different port, like 8888 in your example, you have to override the default. More infos can be found here http://feedback.livereload.com/knowledgebase/articles/195869-how-to-change-the-port-number-livereload-listens-o

Answer 2

You can use Live Reload Browser Page

Live Reload Browser Page

GitHub live-reload-bp

Works with NodeJs, Grunt, Gulp, WebPack. You can use any IDE if it has a function to autosave a file after editing