title: How to filter a gulp watch, which watches for CSS changes, in order to let browserSync stream only the actual modified files
body: <p>I have a gulp watch task:</p>
  
  <pre><code> gulp.watch([
          basePath+'/css/**/*.css'
      ], ['css']);
  </code></pre>
  
  <p>This task listens to changes of css files and starts the <strong>"css"</strong> task.</p>
  
  <p>The css task, uses browserSync to stream the changes:</p>
  
  <pre><code>var gulp = require('gulp'),
          browserSync = require('browser-sync');
  
      gulp.task('css', function() {
          return gulp.src(basePath+'/css/**/*.css', {'read': false})
              .pipe(browserSync.stream());
      });
  </code></pre>
  
  <p>The problem is, <strong>when I change only 1 css file</strong>, browserSync see's all the css files in the folder (due to gulp.src) and, using web-sockets, streams the changes in the browser for all the files.</p>
  
  <pre><code>[BS] 3 files changed (custom.css, custom2.css, main.css)
  </code></pre>
  
  <p>This happens even if I change only custom2.css</p>
  
  <p>Now, the question:</p>
  
  <p>How to filter the gulp watch, or CSS task, in order to let browserSync stream only the actual modified files? and not all of them...</p>
  
  <p>Any ideas?</p>