LibSass + Sourcemaps + Autoprefixer + CSS Injection

browsersync-source-examples-gulp-2.js

var gulp         = require('gulp');
var sass         = require('gulp-sass');
var sourcemaps   = require('gulp-sourcemaps');
var autoprefixer = require('gulp-autoprefixer');
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(sourcemaps.init())
    .pipe(sass())
    .pipe(autoprefixer())
    .pipe(sourcemaps.write('./'))
    .pipe(gulp.dest('./styles.css'))
    .pipe(bs.stream({match: '**/*.css'}));
});

gulp.task('watch-all', function() {
  gulp.watch('**/*.scss', ['sass']);
});

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