Question

我使用gulp-connect 2.0.6尝试让livereload工作，

WebSocket connection to 'ws://localhost:35729/livereload' failed: Error during WebSocket handshake: Status line contains embedded null

抛出该错误的行说明，

this.socket = new this.WebSocket(this._uri);

我在此gist中粘贴了所有相关文件（gulpfile.js，package.json等）和控制台输出。

Answer 1

据我所知，您似乎正在关注我发布的一个截屏视频，通过自动重新加载启动D3环境：https://www.tagtree.tv/d3-episode1-environment

我看了一下这个要点。为了让这个帖子更容易为每个人阅读，我想提取你的gulpfile.js的内容：

您的gulpfile.js

var gulp = require('gulp'),
  connect = require('gulp-connect'),
  traceur = require('gulp-traceur'),
  sass = require('gulp-ruby-sass');

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

gulp.task('sass', function(){
  gulp.src('./sass/*.scss')
  .pipe(sass())
  .pipe(gulp.dest('dist/css'));
});

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

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

<强>解决方案

我不知道这是否是绝对必要的，但是当我对截屏视频进行编码时，我所做的就是从监视任务中调出一个gulp任务，该任务在连接上调用reload。

更改观看任务

首先，您需要将观看任务更改为这样。请注意，该路径使用screencast中的路径，但使用正确的glob来监视应该触发重新加载的文件。

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

重新加载任务

reload任务调用connect模块上的reload，它在websocket上发布一条消息，导致重新加载文件，这是我的重载任务的样子：

gulp.task('reload', function(){
    gulp.src('./dist/**/*.*')
    .pipe(connect.reload());
});

gulpfile.js的最终版本

对于其他遇到 screencast 问题的人，请查看 gulpfile 的最终版本：

var gulp = require('gulp'),
    connect = require('gulp-connect'),
    traceur = require('gulp-traceur'),
    sass = require('gulp-ruby-sass');

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

gulp.task('reload', function(){
    gulp.src('./dist/**/*.*')
    .pipe(connect.reload());
});

gulp.task('sass', function(){
    gulp.src('./sass/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('dist/css'));
});

gulp.task('traceur', function(){
    gulp.src('./scripts/*.js')
    .pipe(traceur())
    .pipe(gulp.dest('dist/scripts'));
});


gulp.task('watch', function(){
    gulp.watch(['./sass/*.scss'], ['sass']);
    gulp.watch(['./scripts/*.js'], ['traceur']);
    gulp.watch(['./dist/**/*.*'], ['reload']);
});


gulp.task('default', ['connect', 'watch', 'sass', 'traceur']);

如何让livereload工作？

1 个答案: