Implement Better Browser Watch

[amcdnl]

Implement a better browser watch system that doesn't refresh the page w/ just css changes and such.

See @brianfeister example https://github.com/brianfeister/angular-systemjs-seed/blob/master/gulpfile.js for ideas

[brianfeister]

Thanks for the shout out. That gulpfile is long, the magic is pretty simple, I just broke the compile task out so that LESS has it's own stream and also it's own watcher:

gulp.task('compile-all', function (callback) {
  return runSequence(
    ['less', 'less-themes', 'html', 'es6', 'move'],
    callback
  );
});

gulp.task('compile-other', function (callback) {
  return runSequence(
    ['html', 'es6', 'move'],
    callback
  );
});

gulp.task('compile-less', function (callback) {
  return runSequence(
    ['less', 'less-themes'],
    callback
  );
});

gulp.task('recompile', function (callback) {
  return runSequence(
    'clean',
    ['compile-all'],
    callback
  );
});

[...]

gulp.task('watch', ['serve'], function() {
  var watchOther = gulp.watch([clientPath.source, clientPath.html], ['compile-other']);
  var watchLess = gulp.watch([clientPath.less, clientPath.themes], ['compile-less']);
  watchOther.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
  watchLess.on('change', function(event) {
    console.log('File ' + event.path + ' was ' + event.type + ', running tasks...');
  });
});

[brianfeister]

Oh and there is one other "gotcha" I almost forgot about, I'm using gulp-filter to stop the stream when it catches a *.map file which will trigger the unwanted page reload:

gulp.task('less-themes', function () {
    return gulp.src(clientPath.themes)
      .pipe(cache('less-themes'))
      .pipe(plumber())
      .pipe(changed(clientPath.output, {extension: '.less'}))
      .pipe(sourcemaps.init())
      .pipe(less({
        plugins: [ cleancss ]
      }))
      .pipe(sourcemaps.write("."))
      .pipe(gulp.dest(clientPath.themesOutput))
      .pipe(filter('**/*.css')) // prevents reloading due to .map files
      .pipe(browserSync.reload({ stream: true }));
});

and then

gulp.task('less', function () {
  return gulp.src(clientPath.less)
    .pipe(cache('less'))
    .pipe(plumber())
    .pipe(changed(clientPath.output, {extension: '.less'}))
    .pipe(sourcemaps.init())
    .pipe(less({
      plugins: [ cleancss ]
    }))
    .pipe(autoprefixer({
        browsers: ['last 2 versions'],
        cascade: false
    }))
    .pipe(sourcemaps.write("."))
    .pipe(gulp.dest(clientPath.output))
    .pipe(filter('**/*.css')) // prevents reloading due to .map files
    .pipe(browserSync.reload({ stream: true }));
});