LibSASS + CSS Injection + Reload bei HTML/JS Änderungen

browsersync-source-examples-gulp-3.js

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var bs           = require('browser-sync').create();
var runSequence  = require('run-sequence');

gulp.task('browser-sync', function() {
  bs.init({
    server: {
      baseDir: './'
    }
  });
});

gulp.task('sass', function() {
  return gulp.src('**/*.scss')
    .pipe(sass())
    .pipe(gulp.dest('./styles.css'))
    .pipe(bs.stream());
});

gulp.task('js', function() {
  return gulp.src('**/*.js')
    .pipe(gulp.dest('./base.js'));
});

gulp.task('watch-all', function() {
  gulp.watch('**/*.scss', ['sass']);
  gulp.watch('**/*.js', ['js']).on('change', bs.reload);
  gulp.watch('**/*.html').on('change', bs.reload);
});

gulp.task('default', function() {
  runSequence(['sass', 'js', 'watch-all'], 'browser-sync');
});