Browser doesn't reload with gulp and livereload

Question

Please forgive me if this may seem like a duplicate question, but I have read every resource I could find to help me determine the root of my problem.

I am trying to have gulp reload Chrome after I have compiled a jade file. I have this for my 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']);

My filestructure is:

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

Upon typing gulp in the command line, everything appears to be fine; my jade files are compiled whenever saved, however Chrome is not refreshed. A few remarks:

• I have the LiveReload extension installed on chrome, and the extension icon says "LiveReload is connected" when I am on http://localhost:8080
• I have eneabled "Allow Access to File URLS" in the Chrome extensions preferences for the LiveReload extension.
• When gulp is running, http://localhost:35729 returns then json {"tinylr":"Welcome","version":"0.2.1"}.
• I've tried this both on Windows and Linux without success.

Any suggestions?

Answer 1

Livereload seems to not work reliably in newer versions of gulp-connect, see Livereload is broken since 3.0.0.

I tried your Gulpfile using gulp-connect@3.1.1 and I couldn't get livereload to work either. However falling back to version 2.3.1 of gulp-connect as suggested in the linked issue thread did fix the problem. Might be worth a try.