Ошибка печеночной ошибки Gulp в Chrome

Question

Я пытаюсь получить LiveReload для работы с Gulp и Chrome. Я установил расширение Chrome (v2.0.9), я включил «Разрешить доступ к URL-адресам файла», о котором все говорят. Я запускаю простой PHP-сервер с php -S 127.0.0.1:35729 -t dist. Я установил Глоток-LiveReload и начал смотреть задачу с этим кодом:

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'); 
}); 

Я хожу в 127.0.0.1:35729 в ​​Chrome. Я включаю LiveReload, нажав кнопку расширения. Я иду и редактирую файл. Gulp говорит:

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

Веб-страница не обновляется. Консоль в Chrome имеет эту прекрасную ошибку при загрузке страницы:

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 

Я пытался что-то сумасшедшее и поместить файл livereload.js в корне моего сервера, а затем я получаю эту ошибку вместо того, чтобы:

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

Кроме того, я хотел бы запустить LiveReload на другой порт, но когда я изменить сервер PHP и Глоток смотреть на порт 9999, я получаю эту ошибку:

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

Answer 1

Почему вы хотите использовать LiveReload? вместо этого используйте browserSync. Это очень просто.

Вот мой ответ на вопрос с проблемами LiveReload

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

Вот рабочий пример с 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']); 

}); 

Надеется, что это поможет.

Answer 2

Также получил ошибку:

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

с глотком-LiveReload. Решена проблема с AdBlocker Отключение хромированного расширения.