Gulp Compass & Minify with notification on error (OS X)

README.md

You might need this: brew install terminal-notify

..and you might might need this: brew linkapps terminal-notify

gulp.png can be found at http://i.imgur.com/pBxLy8j.png

...you'll need to install the deps: npm install --save-dev gulp gulp-compass gulp-autoprefixer gulp-minify-css gulp-uglify gulp-rename gulp-concat gulp-notify gulp-livereload gulp-plumber path

...and obviously, you're gonna want to install a livereload browser plugin. You're on your own with this one!

..and finally, edit gulpfile.js to match your project's folder structure...

But that should be pretty much it!

Fast n simple, eh?

gulpfile.js

/*eslint strict:0*/
/*eslint-env node*/

var gulp = require("gulp");
var compass = require("gulp-compass");
var autoprefixer = require("gulp-autoprefixer");
var minifyCSS = require("gulp-minify-css");
var uglify = require("gulp-uglify");
var rename = require("gulp-rename");
var concat = require("gulp-concat");
var notify = require("gulp-notify");
var livereload = require("gulp-livereload");
var plumber = require("gulp-plumber");
var path = require("path");

var onError = notify.onError({
  /* It's fucking hideous, but it works for now... */
  icon: path.join(__dirname, "gulp.png"),
  title: "<%= error.plugin %>",
  subtitle: "<%= error.message.split('[0m')[1].split('(Line ')[0] %>",
  message: "<%= error.message.split('[0m')[1].split('(Line ')[1].split('.)')[0] %>"
});

gulp.task("styles", function () {
  return gulp.src(["src/scss/**/*.scss"])
    .pipe(plumber({errorHandler: onError}))
    .pipe(compass({
      css: "css",
      sass: "src/scss",
      image: "img"
    }))
    .pipe(autoprefixer("last 2 version", "safari 5", "ie 7", "ie 8", "ie 9", "opera 12.1", "ios 6", "android 4"))
    .pipe(gulp.dest("css"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(minifyCSS())
    .pipe(gulp.dest("css"));
});

gulp.task("scripts", function () {
  return gulp.src("src/js/**/*.js")
    .pipe(plumber())
    .pipe(concat("main.js"))
    .pipe(gulp.dest("js"))
    .pipe(rename({ suffix: ".min" }))
    .pipe(uglify())
    .pipe(gulp.dest("js"));
});

gulp.task("default", function () {
  livereload.listen();
  gulp.watch("src/scss/**/*.scss", ["styles"]);
  gulp.watch("src/js/**/*.js", ["scripts"]);

  gulp.watch(
    ["*.html",
    "css/styles.min.css",
    "js/main.min.js"], function (event) {
      gulp.src(event.path)
        .pipe(plumber())
        .pipe(livereload());
  });
});