gulpfile.js

var
  argv = require('yargs').argv, // for args parsing
  browserSync = require('browser-sync'),

  gulp = require('gulp'),
  autoprefixer = require('gulp-autoprefixer'),
  cache = require('gulp-cache'),
  clean = require('gulp-clean'),
  concat = require('gulp-concat'),
  gzip = require('gulp-gzip'),
  livereload = require('gulp-livereload'),
  minifycss = require('gulp-minify-css'),
  notify = require('gulp-notify'),
  rename = require('gulp-rename'),
  sass = require('gulp-sass'),
  spawn = require('child_process').spawn,
  sourcemaps = require('gulp-sourcemaps'),
  watch = require('gulp-watch'),
  filter = require('gulp-filter');

var gzip_options = {
  threshold: '1kb',
  gzipOptions: {
    level: 9
  }
};

var
  css_dir = './css/',
  html_dir = './',
  sass_dir = './master/sass/';

// Sass
gulp.task('sass', function () {
  return gulp.src([sass_dir + '**/*.scss'])

    // Initializes sourcemaps for better browser debugging
    .pipe(sourcemaps.init())

    //.pipe(filter('./**/*.css'))                         // filter problematic characters in css files
    .pipe(sass({
      style: 'compressed',
      cacheLocation: './cache/.sass-cache',
      errLogToConsole: true
    }))

    .pipe(autoprefixer('last 2 version', 'safari 5', 'ie 8', 'ie 9', 'opera 12.1', 'ios 6', 'android 4'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest(css_dir))

    .pipe(rename({suffix: '.min'}))
    .pipe(minifycss())
    .pipe(gulp.dest(css_dir))

    .pipe(gzip(gzip_options))
    .pipe(gulp.dest(css_dir))

    .pipe(notify({message: 'Styles task complete'}));
});

// Primary task to watch other tasks
gulp.task('watch', function () {
  gulp.watch([sass_dir + '**/*.scss'], ['sass']);             // Watch Sass
});

gulp.task('browser-sync', function () {
  var files = [
    html_dir + '**/*.html',
    css_dir + '**/*.css'
  ];

  browserSync.init(files, {
    server: {
      baseDir: '.'
    }
  });
});

gulp.task('build', ['sass']);
gulp.task('default', ['build', 'watch', 'browser-sync']);