title: Gulp browser-sync only works once
body: <p>I'm trying out Gulp on one of my projects and I wanted to run it like I used to with Grunt watch. Meaning, it has to watch less files and js files, lint, merge, compile and refresh the browser once all that is done.</p>
  
  <p>I managed to make it work with gulp-browser-sync but for some reason it only works once. I do a change to my .less file and the browser reloads. Then, a second change, it does compile but no reload happens.</p>
  
  <p>Here's the log:</p>
  
  <pre><code>[BS] Serving files from: ./
  [09:47:26] Starting 'css-clean'...
  [09:47:26] Finished 'css-clean' after 16 ms
  [09:47:26] Starting 'styles'...
  [BS] 1 file changed (styles.min.css)
  [09:47:27] Finished 'styles' after 624 ms
  [09:47:27] Starting 'styles-watch'...
  [BS] Reloading Browsers...
  </code></pre>
  
  <p>And when I hit save a second time:</p>
  
  <pre><code>[09:47:31] Starting 'css-clean'...
  [09:47:31] Finished 'css-clean' after 3.39 ms
  [09:47:31] Starting 'styles'...
  [BS] 1 file changed (styles.min.css)
  [09:47:32] Finished 'styles' after 362 ms
  </code></pre>
  
  <p>As for the JS, it works all the time. No issues whatsoever, even after the styles task is done, the JS changes are still triggering the reload properly. Really is only the styles that has issues.</p>
  
  <p>Here's the gulpfile.js</p>
  
  <pre><code>var gulp = require('gulp'),
      autoprefixer = require('gulp-autoprefixer'),
      less = require('gulp-less'),
      minifycss = require('gulp-minify-css'),
      concat = require('gulp-concat'),
      jshint = require('gulp-jshint'),
      uglify = require('gulp-uglify'),
      rename = require('gulp-rename'),
      notify = require('gulp-notify'),
      path = require('path'),
      streamqueue = require('streamqueue'),
      clean = require('gulp-clean'),
      browserSync = require('browser-sync').create(),
      reload = browserSync.reload;
  
  
  // Clean the CSS folder
  gulp.task('css-clean', function () {
      return gulp.src(['dist/css'], {read: false})
          .pipe(clean());
  });
  
  // Clean the CSS folder
  gulp.task('js-clean', function () {
      return gulp.src(['dist/js'], {read: false})
          .pipe(clean());
  });
  
  
  // Generate the CSS styles, clean before hand
  gulp.task('styles', ['css-clean'], function() {
    return streamqueue({ objectMode: true },
              gulp.src(['./bower_components/uikit/less/uikit.less']),
              gulp.src(['./src/less/main.less'])
          )
      .pipe(concat('styles.less'))
      .pipe(less({
        paths: [ path.join(__dirname, 'less', 'includes') ]
      }))
      .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
      .pipe(gulp.dest('dist/css'))
      .pipe(rename({suffix: '.min'}))
      .pipe(minifycss())
      .pipe(gulp.dest('dist/css'))
      .pipe(browserSync.reload({stream:true}));
  });
  
  // create a task that ensures the `styles` task is complete before
  // reloading browsers
  gulp.task('styles-watch', ['styles'], browserSync.reload);
  
  
  
  // Lint Task
  gulp.task('lint', function() {
      return gulp.src('src/js/*.js')
          .pipe(jshint())
          .pipe(jshint.reporter('default'));
  });
  
  
  // Generate the scripts, clean before hand
  gulp.task('scripts', ['js-clean', 'lint'], function() {
    return streamqueue({ objectMode: true },
              gulp.src(['./bower_components/jquery/dist/jquery.js']),
              gulp.src(['./bower_components/modernizer/modernizr.js']),
              gulp.src(['./bower_components/uikit/js/uikit.js']),
              gulp.src(['./src/js/plugin.js']),
              gulp.src(['./src/js/main.js'])
          )
      .pipe(concat('scripts.js'))
      .pipe(gulp.dest('dist/js'))
      .pipe(rename({suffix: '.min'}))
      .pipe(uglify())
      .pipe(gulp.dest('dist/js'))
      .pipe(browserSync.reload({stream:true}));
  });
  
  // create a task that ensures the `scripts` task is complete before
  // reloading browsers
  gulp.task('scripts-watch', ['scripts'], browserSync.reload);
  
  
  // Lint Task
  gulp.task('alldone', ['scripts'], function() {
      return gulp.src('src/js/*.js')
                 .pipe(notify({ message: 'Gulp tasks are completed!!' }));
  });
  
  
  // Static server
  gulp.task('browsersync', function() {
      browserSync.init({
          server: {
              baseDir: "./"
          }
      });
  
      gulp.watch("src/less/*.less", ['styles-watch']);
      gulp.watch('src/js/*.js', ['lint', 'scripts-watch']);
      gulp.watch("*.html").on('change', reload);
  });
  
  
  // Default Task
  gulp.task('default', ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);
  
  // Build Task
  gulp.task('build',   ['css-clean', 'js-clean', 'styles', 'lint', 'scripts', 'alldone']);
  </code></pre>
  
  <p>Thanks for your help!</p>