True incremental sass compilation

gulpfile.js

var production = process.env.APP_ENV === "test";
var gulp = require('gulp');
var gutil = require('gulp-util');
var sass = require('gulp-sass');
var cssmin = require('gulp-minify-css');
var prefix = require('gulp-autoprefixer');
var newer = require('gulp-newer');
var print = require('gulp-print');
var notify = require('gulp-notify');
var batch = require('gulp-batch');
var duration = require('gulp-duration');
var livereload = require('gulp-livereload');
var grapher = require('sass-graph');
var touch = require('touch');
var path = require('path');

// -----------------------------------------------------------------------------
// Disable notifier printing to the console.
// -----------------------------------------------------------------------------

notify.logLevel(0);

// -----------------------------------------------------------------------------
// Build the sass import graph
// -----------------------------------------------------------------------------

graph = grapher.parseDir('./assets/css', {
    loadPaths: ['./assets/components', './assets/css']
});

// -----------------------------------------------------------------------------
// Watch sass files for changes and trigger compilation
// -----------------------------------------------------------------------------

gulp.task('dev', function() {

    //
    // Boot live reload server
    //

    livereload.listen();

    //
    // Find the compilation targets for the changed file and make it as dirty
    //

    gulp.watch('./assets/css/**/*.scss', function(event) {
        graph.visitAncestors(event.path, function(parent) {
            if (path.basename(parent).match(/^_/)) return;
            touch.sync(parent);
        });
    });

    //
    // Dedup change events and run the compilation once
    //

    gulp.watch(['./assets/css{/,/pages/}*.scss'], batch({
        timeout: 50
    }, function(events) {
        gulp.run('css');
        return events.pipe(gutil.noop());
    }));
});

// -----------------------------------------------------------------------------
// Sass compilation task
// -----------------------------------------------------------------------------

gulp.task('css', function() {
    gulp.src('./assets/css{/,/pages/}*.scss')
        .pipe(newer({
        dest: './web/dist/css',
        ext: '.css'
    }))
        .pipe(print(function(filepath) {
        return 'compiling: ' + filepath;
    }))
        .pipe(sass({
        includePaths: ['./assets/components', './assets/css'],
        sourceMap: false,
    }))
        .pipe(print(function(filepath) {
        return 'prefixing: ' + filepath;
    }))
        .pipe(prefix({
        browsers: ['last 2 version', 'firefox esr', 'opera 12.1', 'android 4', 'explorer 9'],
        cascade: false,
    }))
        .pipe(production ? print(function(filepath) {
        return 'minifying: ' + filepath;
    }) : gutil.noop())
        .pipe(production ? cssmin({
        processImport: false,
        noRebase: true,
    }) : gutil.noop())
        .pipe(duration('Compiling files'))
        .pipe(notify('Compiled: <%= file.relative %>!'))
        .pipe(gulp.dest('./web/dist/css'))
        .pipe(livereload());
});

gulp.task('default', ['css']);

package.json

{
  "name": "swiftly",
  "version": "0.0.0",
  "repository": {
    "type": "git",
    "url": "https://github.com/99designs/swiftly.git"
  },
  "dependencies": {
    "bower": "^1.3",
    "distancss": "0.0.9"
  },
  "devDependencies": {
    "gulp": "^3.8.10",
    "gulp-autoprefixer": "^2.0.0",
    "gulp-batch": "^1.0.4",
    "gulp-duration": "0.0.0",
    "gulp-livereload": "^3.4.0",
    "gulp-minify-css": "^0.3.12",
    "gulp-newer": "^0.5.0",
    "gulp-notify": "^2.1.0",
    "gulp-print": "^1.1.0",
    "gulp-sass": "git://github.com/xzyfer/gulp-sass#fix/node-sass-bad-maps",
    "gulp-util": "^3.0.2",
    "lodash": "^2.4.1",
    "node-sass": "git://github.com/xzyfer/node-sass",
    "sass-graph": "^1.0.1",
    "touch": "0.0.3"
  }
}

Thanks for sharing!

You're a hero.

Which node version?