node.js - 浏览器不会通过 gulp 和 livereload 重新加载

Question

如果这看起来像是一个重复的问题，请原谅我，但我已经阅读了我能找到的所有资源来帮助我确定问题的根源。

我正在尝试在编译了一个jade文件后让gulp重新加载Chrome。我的 gulpfile.js 有这个:

var gulp       = require('gulp'),
    jade       = require('gulp-jade'),
    connect    = require('gulp-connect');

gulp.task('jade', function() {
   return gulp.src('src/*.jade')
      .pipe(jade({pretty: true}))
      .pipe(gulp.dest('dev/'))
      .pipe(connect.reload())
});

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

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

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

我的文件结构是:

.
├── dev/
│   └── index.html
├── node_modules/
├── src/
│   └── index.jade
├── gulpfile.js
└── package.json

在命令行中输入gulp后，一切似乎都很好；我的 jade 文件在保存时都会编译，但 Chrome 不会刷新。几点说明:

• 我在 Chrome 上安装了 LiveReload 扩展程序，当我使用 http://localhost:8080 时，扩展程序图标显示“LiveReload 已连接”
• 我已在 LiveReload 扩展程序的 Chrome 扩展程序首选项中启用了“允许访问文件 URL”。
• 当 gulp 运行时，http://localhost:35729然后返回 json {"tinylr":"Welcome","version":"0.2.1"}。
• 我在 Windows 和 Linux 上都尝试过此操作，但没有成功。

有什么建议吗？

Answer 1

Livereload 在较新版本的 gulp-connect 中似乎无法可靠工作，请参阅 Livereload is broken since 3.0.0 .

我使用 gulp-connect@3.1.1 尝试了你的 Gulpfile，但也无法让 livereload 工作。然而，按照链接问题线程中的建议，回退到 gulp-connect 版本 2.3.1 确实解决了问题。也许值得一试。