gulp-connect and connect.reload

Question

I am trying to set up a simple server to test out some d3.js stuff. I'm following a screencast on tagtree.tv. My code matches his, but I cannot get my index.html to reload when I make a change to my JS or SASS files.

I'm new to gulp so as far as I can tell things look OK, but that's based upon my assumption that a call to connect.reload() will reload whatever browser is looking at its content. It should be noted that the livereload JS is being inserted into my index.html file.

My directory structure is as follows:

d3play
 -bower_components
 -dist
   -css
   -scripts
 - node_modules
 -sass
 -scripts
 gulpfile.js
 index.html
 package.json

My gulpfile.js looks like this:

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
  });
});

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', 'sass', 'traceur', 'watch']);

Answer 1

Here is a simple and tested livereload solution based on connect server and connect-livereload and gulp-livereload plugins that might help:

var gulp = require('gulp');
var connect = require('connect');
var connectLivereload = require('connect-livereload');
var opn = require('opn');
var gulpLivereload = require('gulp-livereload');

var config = {
    rootDir: __dirname,
    servingPort: 8080,

    // the files you want to watch for changes for live reload
    filesToWatch: ['*.{html,css,js}', '!Gulpfile.js']
}

// The default task - called when you run `gulp` from CLI
gulp.task('default', ['watch', 'serve']);

gulp.task('watch', ['connect'], function () {
  gulpLivereload.listen();
  gulp.watch(config.filesToWatch, function(file) {
    gulp.src(file.path)
      .pipe(gulpLivereload());
  });
});

gulp.task('serve', ['connect'], function () {
  return opn('http://localhost:' + config.servingPort);
});

gulp.task('connect', function(){
  return connect()
    .use(connectLivereload())
    .use(connect.static(config.rootDir))
    .listen(config.servingPort);
});

Answer 2

Faced with a similar situation where I was trying to do

gulp.watch(['path/to/**/*.foo'], ['doTheReload'])

I got it working by changing the reload to stream directly on the watch e.g.:

gulp.watch(['path/to/**/*.foo']).pipe(connect.reload());

Without knowing anything more than this, I'm guessing that the stream that connect.reload() expects is somehow different than the one provided by gulp.src().