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?