Chrome 中的 Gulp 实时重新加载错误

Question

我正在尝试让LiveReload与Gulp和Chrome一起工作。我已经安装了Chrome扩展程序(v2.0.9(，我启用了"允许访问文件URL"，每个人都说要这样做。我正在运行一个简单的PHP服务器，php -S 127.0.0.1:35729 -t dist.我已经安装了gulp-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');
});

我在Chrome中转到127.0.0.1：35729。我通过单击扩展按钮启用实时重新加载。我去编辑一个文件。咕噜 说：

 [13:28:48] undefined reloaded. 
 PHP file changed (M:pathtofile)

网页不会更新。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 连接到"ws://127.0.0.1:35729/livereload"失败： 在收到握手响应之前关闭连接

另外，我想在不同的端口上运行 LiveReload，但是当我将 php 服务器和 Gulp 手表更改为端口 9999 时，出现此错误：

WebSocket 连接到"ws://127.0.0.1:35729/livereload"失败：连接建立时出错：net：：ERR_CONNECTION_REFUSED

Answer 1

也出现错误：

WebSocket 连接到"ws://127.0.0.1:35729/livereload"失败：连接建立时出错：net：：ERR_CONNECTION_REFUSED

与咕噜咕噜。解决了广告拦截器Chrome扩展程序禁用的问题。

Answer 2

为什么要

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

希望对您有所帮助。