Live Reload not Working with express, connect-livereload, tiny-lr, gulp-embedlr and gulp-livereload

Question

I followed this tutorial to set up a Gruntfile for a little project I'm working on. everything seems to be working great, except for the live reload part. I don't get any errors, but no live reloading either. Here is the code:

var browserify = require('browserify'),
    buffer = require('vinyl-buffer'),
    concat = require('gulp-concat'),
    del = require('del'),
    embedlr = require('gulp-embedlr'),
    express = require('express'),
    gulp = require('gulp'),
    gutil = require('gulp-util'),
    jshint = require('gulp-jshint'),
    livereload = require('connect-livereload'),
    lrserver = require('tiny-lr')(),
    refresh = require('gulp-livereload'),
    replace = require('gulp-replace'),
    source = require('vinyl-source-stream'),
    sourcemaps = require('gulp-sourcemaps'),
    uglify = require('gulp-uglify');

// clean
gulp.task('clean', function(callback) {
  del('./dist/*', callback);
});

// img
gulp.task('img', function() {
  return gulp.src('./src/img/*')
        .pipe(gulp.dest('./dist/img/'));
});

// index
gulp.task('index', function() {
  return gulp.src('./src/index.html')
        .pipe(replace('__now__', new Date().toDateString()))
        .pipe(gulp.dest('./dist/'));
});

gulp.task('index-dev', function() {
  return gulp.src('./src/index.html')
        .pipe(replace('__now__', new Date().toDateString()))
        .pipe(gulp.dest('./dist/'))
        .pipe(refresh(lrserver));
});

// script
gulp.task('lint', function() {
  return gulp.src('./src/script/*')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

gulp.task('script', [ 'lint' ], function() {
  browserify({ entries: './src/script/dforbes.js', debug: true })
  .bundle()
  .pipe(source('dforbes.js'))
  .pipe(buffer())
  .pipe(uglify({ mangle: false }))
  .on('error', gutil.log)
  .pipe(gulp.dest('./dist/script/'));
});

gulp.task('script-dev', [ 'lint' ], function() {
  browserify({ entries: './src/script/dforbes.js', debug: true })
  .bundle()
  .pipe(source('dforbes.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init({ loadMaps: true }))
  .pipe(uglify({ mangle: false }))
  .on('error', gutil.log)
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./dist/script/'));
});

// style
gulp.task('style', function() {
  return gulp.src('./src/style/*')
        .pipe(gulp.dest('./dist/style/'));
});

// tmp
gulp.task('tmp', function() {
  return gulp.src('./src/tmp/*')
        .pipe(gulp.dest('./dist/tmp/'));
});

gulp.task('tmp-dev', function() {
  return gulp.src('./src/tmp/*')
        .pipe(gulp.dest('./dist/tmp/'))
        .pipe(refresh(lrserver));
});

// watch
gulp.task('watch', function() {
  gulp.watch([ './src/img/*' ], [ 'img' ]);
  gulp.watch([ './src/index.html' ], [ 'index-dev' ]);
  gulp.watch([ './src/script/*' ], [ 'script-dev' ]);
  gulp.watch([ './src/style/*' ], [ 'style' ]);
  gulp.watch([ './src/tmp/*' ], [ 'tmp-dev' ]);
});

// dev
gulp.task('dev', [ 'clean' ], function() {
  gulp.start([ 'img', 'index', 'script-dev', 'style', 'tmp' ]);

  var livereloadPort = 35729;
  var serverPort = 8080;

  var server = express();
  server.use(livereload({ port: livereloadPort, start: true }));
  server.use(express.static('./dist'));
  server.all('/*', function(req, res) {
    res.sendFile('index.html', { root: 'dist' });
  });

  server.listen(serverPort);
  lrserver.listen(livereloadPort);

  gulp.start('watch');
});

// default
gulp.task('default', [ 'clean' ], function() {
  gulp.start([ 'img', 'index', 'script', 'style', 'tmp' ]);
});

Answer 1

You miss the refresh call to let LiveReload know that something has changed on some parts. Here's the change for your style task:

gulp.task('style', function() {
   return gulp.src('./src/style/*')
       .pipe(gulp.dest('./dist/style/'))
       .pipe(refresh());
});

Just add the last pipe everywhere you want the refresh to happen.

Update

Also, there are some issues in your Gulpfile. Please return every gulp.src statement you find, also don't put two gulp.src statements into one gulp.task if you don't merge them.

// wrong
gulp.task('tmp-dev', function() {
  gulp.src('./src/index.html')
  .pipe(gulp.dest('./dist/'))
  .pipe(refresh(lrserver));

  gulp.src('./src/tmp/*')
  .pipe(gulp.dest('./dist/tmp/'))
  .pipe(refresh(lrserver));
});

// correct
gulp.task('tmp-dev', function() {
  return gulp.src(['./src/index.html','./src/tmp/*'])
    .pipe(gulp.dest('./dist/'))
    .pipe(refresh(lrserver));
});

Another solution would be to create a watcher pointed to the dist directory, refreshing everytime something has changed in there:

 gulp.watch('./dist/**/*', refresh);

The other way would be preferred though, as it gives you more control Edit: This one's bogus