Compile Sass and generate KSS docs with Gulp.

sass_kss_gulp.md

Setting up Gulp to compile Sass and build KSS docs

Install dependencies:

npm install --save-dev gulp gulp-sass gulp-kss gulp-concat gulp-clean

This will add devDependencies to your package.json that looks like this:

{
  "name": "example-scss-kss",
  "description": "Example scss/kss project.",
  "devDependencies": {
    "gulp-kss": "0.0.2",
    "gulp-sass": "^0.7.2",
    "gulp-concat": "^2.2.0",
    "gulp-clean": "^0.3.0"
  }
}

Then you need to make a gulpfile.js like this:

var gulp = require('gulp');
var gulpsass = require('gulp-sass');
var gulpkss = require('gulp-kss');
var gulpconcat = require('gulp-concat');
var gulpclean = require('gulp-clean');

gulp.task('default', ['sass', 'kss']);

gulp.task('watch', function() {
  gulp.watch(['./src/kss/*'], ['kss']);
  gulp.watch(['./src/scss/*.scss'], ['sass', 'kss']);
});

gulp.task('sass', function() {
  return gulp.src('./src/scss/styles.scss')
    .pipe(gulpsass())
    .pipe(gulp.dest('./dist'));
});

gulp.task('kss-clean', function () {
  return gulp.src('./dist/docs')
    .pipe(gulpclean());
});

gulp.task('kss', ['sass', 'kss-clean'], function () {
  // generate docs
  gulp.src(['./src/scss/*.scss'])
    .pipe(gulpkss({ overview: './src/docs/index.md' }))
    .pipe(gulp.dest('./dist/docs'));

  // copy styles.css for docs
  gulp.src('./dist/styles.css')
    .pipe(gulpconcat('style.css'))
    .pipe(gulp.dest('./dist/docs/public'));
});

Then just run gulp watch to rebuild as you modify files. You can also run gulp build to just build one time.