Gulp livereload error in Chrome

Question

I am trying to get LiveReload to work with Gulp and Chrome. I have installed the Chrome extension (v2.0.9), I have enabled "Allow Access to File URLs", which everyone says to do. I am running a simple PHP server with php -S 127.0.0.1:35729 -t dist. I have installed gulp-livereload and started the watch task with this code:

var gulp = require('gulp'),
    reload = require('gulp-livereload');

gulp.task('watch', function(){

    reload.listen(35729, function (err) {
        if (err) return console.log(err);
    });

    gulp.watch('dist/**').on('change', function(file) {
        reload.changed();
        console.log('PHP file changed' + ' (' + file.path + ')');
    });    
});

gulp.task('default', function(){
    gulp.start('watch');
});

I go to 127.0.0.1:35729 in Chrome. I enable LiveReload by clicking the extension button. I go and edit a file. Gulp says:

 [13:28:48] undefined reloaded. 
 PHP file changed (M:\path\to\file)

The web page does not update. The console in Chrome has this lovely error when the page loads:

GET http://127.0.0.1:35729/livereload.js?ext=Chrome&extver=2.0.9 injected.js:116 
LiveReloadInjected.doEnable injected.js:116
(anonymous function) injected.js:150
. many
. other
. lines
$Array.forEach.publicClass.(anonymous function) extensions::utils:94
dispatchOnMessage extensions::messaging:304 

I tried something crazy and put the livereload.js file in the root of my server and then I get this error instead:

WebSocket connection to 'ws://127.0.0.1:35729/livereload' failed: Connection closed before receiving a handshake response

Also, I would like to run LiveReload on a different port, but when I change the php server and Gulp watch to port 9999 I get this error:

WebSocket connection to 'ws://127.0.0.1:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

Answer 1

Also got error:

WebSocket connection to 'ws://127.0.0.1:35729/livereload' failed: Error in connection establishment: net::ERR_CONNECTION_REFUSED

with gulp-livereload. Resolved the issue by AdBlocker chrome extension disabling.

Answer 2

Why you want to use livereload? use browserSync instead. It's very simple.

Here is my answer to question with problems of livereload

https://stackoverflow.com/a/34687485/2592561

Here is the working Example with Livereload:

var gulp         = require('gulp'),
    livereload   = require('gulp-livereload'),
    sass         = require('gulp-ruby-sass'),
    _if          = require('gulp-if'),
    watch        = require('gulp-watch'),
    sourcemaps   = require('gulp-sourcemaps'),
    connect      = require('gulp-connect'),
    inject       = require('gulp-inject'),
    autoprefixer = require('gulp-autoprefixer');


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

gulp.task('default', ['sass', 'inject:css', 'webserver', 'watch:sass']);

gulp.task('sass', function() {
    return sass(
       'src/sass/flex_grid.scss', {

        style: 'expanded',

        sourcemap: true

    }).on('error', function (err) {

        console.error('Error! ', err.message);

    }).pipe(autoprefixer({

        browsers: [ '> 0%', 'last 2 versions', 'Firefox ESR', 'Opera 12.1' ],

        cascade: false

    })).on('error', function (err) {

        console.error('Error! ', err.message);

    })
    .pipe(sourcemaps.write('.', {

        includeContent: false

    })).on('error', function (err) {

        console.error('Error! ', err.message);

    })
    .pipe(gulp.dest('flex_grid'))
    .pipe(connect.reload());

});

gulp.task('inject:css', function () {

  var target  = gulp.src('flex_grid/index.html');
  var sources = gulp.src(['*.css'], {read: false});

  return target.pipe(inject(sources))
               .pipe(gulp.dest('flex_grid'));

});

gulp.task('watch:sass', function() {

    gulp.watch('src/sass/*scss', ['sass']);

});

Hope it's help.