Gulp with Libsass & Susy

gulpfile.js

/**
 * @file
 * Calibrate's Balance theme gulpfile.
 */

// Set environment
var _dev = true;

// Configure variables
var sassStyle = 'compressed',
    fontName  = 'icons',
    autoprefixerBrowsers = ['last 2 versions', '> 3%'],  // https://github.com/ai/browserslist#queries
    themePath = 'sites/all/themes/balance_theme/';

if (_dev) {
  sassStyle = 'expanded';
}

// Configure paths
var paths = {
  styles: {
    src:  themePath + 'sass/**/*.scss',
    dest: themePath + 'css/'
  },
  scripts: {
    src:  [themePath + 'js/*.js', '!' + themePath + 'js/*.min.js'],
    dest: themePath + 'js/'
  },
  images: {
    src:  themePath + 'images/originals/*',
    dest: themePath + 'images/'
  },
  icons: {
    src:  themePath + 'icons/*.svg',
    dest: themePath + 'fonts/'
  }
};

// Load plugins
var gulp = require('gulp'),
    gutil = require('gulp-util'),
    gulpLoadPlugins = require('gulp-load-plugins');
    $ = gulpLoadPlugins();

// Watch event function
var watchEvent = function(evt, type) {
  gutil.log(gutil.colors.red(type + ' event:'), gutil.colors.cyan(evt.path.replace(new RegExp('/.*(?=/)/'), '')), 'was', gutil.colors.magenta(evt.type));
};

// Sass compile + prefix task
gulp.task('sass', function() {
  gulp.src(paths.styles.src)
    .pipe($.plumber())
    .pipe(_dev ? $.sourcemaps.init() : gutil.noop())
    .pipe($.sass({
      outputStyle: sassStyle
    }))
    // Add pixel fallback for rem values.
    .pipe($.pixrem('1rem', { atrules: true }))
    // Prefix CSS depending in required browser support.
    .pipe($.autoprefixer({
      browsers: autoprefixerBrowsers,
      cascade: false
    }))
    .pipe(_dev ? $.sourcemaps.write('./') : gutil.noop())
    .pipe(gulp.dest(paths.styles.dest))
});

// Javascript minify task
gulp.task('scripts', function() {
  gulp.src(paths.scripts.src)
    .pipe($.plumber())
    .pipe($.uglify())
    .pipe($.rename(function (path) {
      path.basename += ".min";
    }))
    .pipe(gulp.dest(paths.scripts.dest));
});

// Image Compression task
gulp.task('imagemin', function() {
  if ($.imagemin) {
    return gulp.src(paths.images.src)
      .pipe($.newer(paths.images.dest))
      .pipe($.imagemin({
        progressive: true,
        svgoPlugins: [{removeViewBox: false}]
      }))
      .pipe(gulp.dest(paths.images.dest));
  }
});

// Iconfont task
gulp.task('iconfont', function() {
  gulp.src([paths.icons.src,])
    .pipe($.iconfont({
      fontName: 'icons',
      normalize: true,
      fontHeight: 128,
      descent: 24,
    }))
    .on('codepoints', function(codepoints, options) {
      gulp.src(themePath + 'icons/template.css')
        .pipe($.consolidate('lodash', {
          glyphs: codepoints,
          fontName: fontName,
          fontPath: paths.icons.dest,
          className: 'icon'
        }))
        .pipe($.rename('icons.scss'))
        .pipe(gulp.dest(themePath + 'sass/'));
    })
    .pipe(gulp.dest(paths.icons.dest));
});

// Watch Task
gulp.task('watch', ['default'], function() {
  gulp.watch(paths.styles.src, ['sass']).on('change', function(e) {
    watchEvent(e, 'Sass');
  });

  gulp.watch(paths.scripts.src, ['scripts']).on('change', function(e) {
    watchEvent(e, 'Scripts');
  });

  gulp.watch(paths.icons.src, ['iconfont']).on('change', function(e) {
    watchEvent(e, 'Iconfont');
  });

  if ($.imagemin) {
    gulp.watch(paths.images.src, ['imagemin']).on('change', function(e) {
      watchEvent(e, 'Imagemin');
    });
  }
});

// Default Task
gulp.task('default', ['sass', 'scripts', 'iconfont', 'imagemin']);