Livereload not working in Chrome using Gulp, what am I missing

Sorry to cover the basics but we all get caught out from time to time.

have you clicked the livereload button in chrome?

if the live reload server is running if will have a solid gray dot in the middle of it.

like so:

If not you will get an error like so:

"Could not connect to LiveReload server. Please make sure that LiveReload 2.3 (or later) or another compatible server is running."

This is what I did that worked. I used plugin gulp-connect instead of the gulp-livereload.

1. Installed the Livereload extension in Chrome.
2. Installed plugin npm install gulp-connect.
3. Setup gulpfile.js (see code below).
4. Go to your browser and go to URL http://localhost:8080/
5. Click the liverelaod icon in the browser.
6. Run gulp.
7. Done.

My Gulpfile:

var gulp = require('gulp');
       
var scssPlugin = require('gulp-sass');
var connect = require('gulp-connect');

    
gulp.task('myStyles', function () {
    gulp.src('sass/*.scss')
        .pipe(scssPlugin())
        .pipe(gulp.dest('css'))
        .pipe(connect.reload());
});

gulp.task('connect', function() {
    connect.server({
        livereload: true
    });
});

gulp.task('watchMyStyles', function() {
    gulp.watch('sass/*.scss', ['myStyles']);
});

gulp.task('default', ['watchMyStyles', 'connect']);

Package File:

{
  "devDependencies": {
    "gulp": "^3.9.0",
    "gulp-connect": "^2.2.0",
    "gulp-sass": "^2.0.4"
  }
}

Reference Links:

https://www.youtube.com/watch?v=KURMrW-HsY4&index=7&list=PLRk95HPmOM6PN-G1xyKj9q6ap_dc9Yckm

http://code.tutsplus.com/tutorials/gulp-as-a-development-web-server--cms-20903

When developing locally make sure 'Allow access to file URLs' is ticked for LiveReload in Chrome's Extensions settings.

I may have been having the same problem -- when I clicked the LiveReload icon it just didn't do anything.

The crucial thing for me was restarting the browser. You don't need to add gulp-connect for this to work - just do the following:

1. Install the livereload chrome extension
2. Configure your gulpfile and package.json (the OP had done so correctly)
3. Go to chrome://extensions and check the box for 'Allow access to file URLs'
4. Restart chrome!
5. Navigate to the page that you're testing and click on the livereload icon. You should notice that the circle in the middle of the icon becomes filled.
6. Start editing code and marvel at the valuable seconds saved by the auto-reloading functionality.