Browser doesn't reload with gulp and livereload

Viewed 1317

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?

2 Answers

In my case the browser didn't refresh because I had another instance of phpStorm already running with livereload. So, be sure you are only running it once.

Related