2

我正在尝试让 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。我通过单击扩展按钮启用 LiveReload。我去编辑一个文件。吞咽 说：

 [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 连接到“ws://127.0.0.1:35729/livereload”失败：连接在收到握手响应之前关闭

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

WebSocket 连接到“ws://127.0.0.1:35729/livereload”失败：连接建立错误：net::ERR_CONNECTION_REFUSED

4

2 回答 2

2

还报错：

WebSocket 连接到“ws://127.0.0.1:35729/livereload”失败：连接建立错误：net::ERR_CONNECTION_REFUSED

使用 gulp-livereload。通过禁用AdBlocker chrome 扩展解决了该问题。

于 2017-03-29T12:52:14.030 回答
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']);

});

希望有帮助。

于 2016-01-08T23:00:51.833 回答