gulpfile.js

// https://markgoodyear.com/2014/01/getting-started-with-gulp/
// http://www.sitepoint.com/introduction-gulp-js/
// http://ilikekillnerds.com/2014/11/10-highly-useful-gulp-js-plugins-for-a-super-ninja-front-end-workflow/

// INSTALL:
// [sudo] npm install --save-dev gulp gulp-jshint gulp-imagemin gulp-notify gulp-autoprefixer gulp-minify-css gulp-compass gulp-uncss gulp-concat gulp-minify-css gulp-uglify gulp-css-condense gulp-iconfont

// include gulp
var gulp = require('gulp');
// include plug-ins
var jshint = require('gulp-jshint');
var imagemin = require('gulp-imagemin');
var notify = require('gulp-notify');
var autoprefix = require('gulp-autoprefixer');
var minifyCSS = require('gulp-minify-css');
var compass = require('gulp-compass');
var uncss = require('gulp-uncss');
var concat = require('gulp-concat');
var minifyCSS = require('gulp-minify-css');
var uglify = require('gulp-uglify');
var cssc = require('gulp-css-condense');

// TODO add https://github.com/johanbrook/gulp-fontcustom
//          https://docs.npmjs.com/files/package.json



// JS minify
gulp.task('scripts', function() {
  return gulp.src('./src/js/*.js')
    .pipe(uglify())
    .pipe(gulp.dest('./js/'));
});



// minify new images
gulp.task('images', function() {
  return gulp.src('./src/img/**/*')
    .pipe(imagemin({ optimizationLevel: 3, progressive: true, interlaced: true }))
    .pipe(gulp.dest('./img'))
    // .pipe(notify({ message: 'Images task complete' }));
});



// Compile the Sass
gulp.task('compass', function() {
  gulp.src('./src/sass/*.scss')
    .pipe(compass({
      css: './src/styles',
      sass: './src/sass'
    }))
    .pipe(gulp.dest('./src/styles'));
});



// CSS concat, auto-prefix, optimise and minify
gulp.task('styles', function() {
  gulp.src(['./src/styles/*.css'])
    .pipe(concat('./styles.css'))
    .pipe(autoprefix('last 2 versions'))
    .pipe(minifyCSS())
    .pipe(gulp.dest('./css/'));
});




// default gulp task
gulp.task('default', ['images', 'scripts', 'compass', 'styles'], function() {
  // watch for img optim changes
  gulp.watch('./src/img/*', function() {
    gulp.start('images');
  });
  // watch for JS changes
  gulp.watch('./src/js/*.js', function() {
    gulp.start('scripts');
  });
  // watch for Sass changes
  gulp.watch('./src/sass/*.scss', function() {
    gulp.start('compass');
  });
  // watch for CSS changes
  gulp.watch('./src/styles/*.css', function() {
    gulp.start('styles');
  });
});