Livereload is not updating my browser when css files changes using gulp

Question

So I'm using gulp.js to manage and automate some tasks and I have a specific task styles that compiles my scss files into css and another to run a server using gulp-connect plugin that provides a livereload integration.

I also have a task watch to watch my changes and trigger the livereload.

gulp.task('watch', function () {
  gulp.watch([ stylesPath + '/**/*.scss'], ['styles']);
  gulp.watch([ scriptsPath + '/**/*.coffee'], ['scripts']);
  gulp.watch([
    './app/**/*.html',
    './app/assets/scripts/**/*.js',
    './app/assets/styles/**/*.css'
  ], connect.reload);
});

This does not always works, actually it works less times than more. I really don't know why. I have the same logic with my .coffee files and it works perfectly for them.. but not to my css files.

Bellow are another related tasks.

gulp.task('connect', connect.server({
  root: './app',
  port: 1337,
  livereload: true,
  open: {
    file: 'index.html',
    browser: 'Google Chrome'
  }
}));

gulp.task('styles', function () {
  gulp.src('.sass-cache').pipe(clean({read:false}));
  return gulp.src(stylesPath + '/**/*.scss')
  .pipe(sass())
  .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
  .pipe(gulp.dest(stylesPath));
});

Answer 1

Actually it was an embarassing mistake of mine.

I included the stylesheet twice in my html file for mistake, for some reason this stopped livereload to work.

Answer 2

Frankly I don't see anything wrong with this.

It'd be best if you report this on Gulp github page. Might be some kind of bug. https://github.com/gulpjs/gulp