title: Livereload is not updating my browser when css files changes using gulp
body: <p>So I'm using <a href="http://gulpjs.com/" rel="nofollow">gulp.js</a> to manage and automate some tasks and I have a specific task <code>styles</code> that compiles my scss files into css and another to run a server using <a href="https://npmjs.org/package/gulp-connect/" rel="nofollow">gulp-connect</a> plugin that provides a livereload integration. </p>
  
  <p>I also have a task <code>watch</code> to watch my changes and trigger the livereload.</p>
  
  <pre><code>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);
  });
  </code></pre>
  
  <p>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.</p>
  
  <p>Bellow are another related tasks.</p>
  
  <pre><code>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));
  });
  </code></pre>