example_gulp.js

'use strict';

//=======================================================
// Include gulp
//=======================================================
var gulp = require('gulp');

//=======================================================
// Include Our Plugins
//=======================================================
var sass       = require('gulp-sass');
var prefix     = require('gulp-autoprefixer');
var sourcemaps = require('gulp-sourcemaps');
var sync       = require('browser-sync');
var filter     = require('gulp-filter');


//=======================================================
// Compile Our Sass
//=======================================================
gulp.task('sass', function() {
  return gulp.src('./sass/{,**/}*.scss')
    .pipe(sourcemaps.init())
    .pipe(sass({ outputStyle: 'nested' })
      .on('error', sass.logError))
    .pipe(prefix({
      browsers: ['last 2 versions'],
      cascade: false
    }))
    .pipe(sourcemaps.write('./maps'))
    .pipe(gulp.dest('./css'))
    .pipe(filter('*.css'))
    .pipe(sync.reload({
      stream: true
    }));
});

//=======================================================
// Watch and recompile sass.
//=======================================================
gulp.task('watch', function() {

  // BrowserSync proxy setup
  // Uncomment this and swap proxy with your local env url.
  // NOTE: for this to work in D7, you must install and enable
  // https://www.drupal.org/project/link_css. This module should
  // NOT be committed to the repo.
  //
  // sync({
  //   open: false,
  //   proxy: 'http://test.mcdev'
  // });

  // Watch all my sass files and compile sass if a file changes.
  gulp.watch('sass/{,**/}*.scss', ['sass']);

});

//=======================================================
// Default Task
//=======================================================
gulp.task('default', ['sass']);