sass.js

var gulp = require('gulp'),
    sass = require('gulp-sass'),
    autoprefixer = require('gulp-autoprefixer'),
    minifycss = require('gulp-clean-css'),
    notify = require('gulp-notify'),
    rename = require('gulp-rename'),
    csso = require('gulp-csso'),
    shorthand = require('gulp-shorthand'),
    uncss = require('gulp-uncss');

gulp.task('styles', function() {
    
    var paths = {
        sassSrcPath: 'source/scss/**/*.scss',
        sassDestPath: 'deploy/c',
        sassImportsPath: 'source/scss/'
    };

    return gulp.src(paths.sassSrcPath)
        .pipe(sass({
            precision: 4
        }).on('error', sass.logError))
        .pipe(autoprefixer('last 2 version'))
        .pipe(gulp.dest(paths.sassDestPath))
        .pipe(rename({suffix: '.min'}))
        .pipe(shorthand())
        .pipe(uncss({
            html: ['deploy/**/*.html'],
            ignore: [
                /.*:{1,2}[\w-]+/,
                /clickable/,
                /img|svg|input/,
                /data\-imaged/,
                /microsoft/,
                /picture/,
                /getActiveMQ/,
                /hero/,
                /project--preview/,
                /crank/,
                /\.admin/,
                /vote/,
                /placeholder/,
                /count/,
                /cookie\-/,
                /\-o\-prefocus/
            ]
         }))
        .pipe(csso({
            restructure: false // clobbered ::-o-prefocus
         }))
        .pipe(minifycss({
            shorthandCompacting: false // it was merging rems over pixels
         }))
        .pipe(gulp.dest(paths.sassDestPath))
        .pipe(notify({ message: 'Styles task complete' }));
});