gulp task to build css from ruby sass, minfied and with base64-data-images

build-css.js

// install gulp depencies
// npm install -D gulp gulp-ruby-sass gulp-autoprefixer gulp-connect gulp-connect gulp-rename gulp-minify-css gulp-filesize gulp-filter gulp-base64 gulp-notify

// Set source and destination directory
var config = {
    src: './app/scss/**/*.scss',
    dest: './app/css'
}

// watch with gulp css:watch
// Build with gulp css

// have fun!

var gulp = require('gulp');
var sass = require('gulp-ruby-sass');
var prefix = require('gulp-autoprefixer');
var connect = require('gulp-connect');
var handleErrors = require('../util/handleErrors');
var rename = require('gulp-rename');
var minifyCSS = require('gulp-minify-css');
var filesize = require('gulp-filesize');
var filter = require('gulp-filter');
var base64 = require('gulp-base64');
var notify = require("gulp-notify");

var handleErrors = function () {

    var args = Array.prototype.slice.call(arguments);

// Send error to notification center with gulp-notify
    notify.onError({
        title: "Compile Error",
        message: "<%= error.message %>"
    }).apply(this, args);

// Keep gulp from hanging on this task
    this.emit('end');
};



// Compile Our Sass
gulp.task('build-css', function () {
    return gulp.src(config.src)
        // handle ruby-sass to css
        .pipe(sass({sourcemap: true, style: 'compact'}))
        .pipe(prefix("last 2 versions", "> 1%", "ie 8"))
        .pipe(gulp.dest(config.dest))
        .pipe(filter(['**/*.css'])) // Filtering stream to only css file
        //getting filesize of compiled css
        .pipe(filesize())
        // minify css
        .pipe(minifyCSS())
        // rename to min
        .pipe(rename(function (path) {
            path.basename += ".min"
        }))
        //getting filesize of min.css
        .pipe(filesize())
        .pipe(gulp.dest(config.dest))
        // filter _noMQ css
        .pipe(filter(['**/*.css', '!*_noMQ.*'])) // Filtering stream to only css files
        // include base64-dataurl
        .pipe(base64(
            {extensions: ['svg', 'png']}
        ))
        .pipe(gulp.dest(config.dest))
        // getting filesize of css with data-images
        .pipe(filesize())
        // reload dev-server
        .pipe(connect.reload())
        .on('error', handleErrors)
        ;
});

gulp.task('css:watch', ['css'], function () {
    gulp.watch(config.src, ['css']);
});