gulpjs.md

Caution

Use gulp-ruby-sass instead of gulp-sass, as the latter is faster, but buggy.
The gulp-ruby-sass compiler is stupid when it comes to directories, it will put all compiled css files in the plain dest no matter when it was originally.

The coffee compiler respects directories like you would expect it to do.

In other words, if you run gulp-ruby-sass for all files in current directory, using the same directory as a dst you will get:

.
|-- a.css
|-- a.scss
|-- b.css
`-- directory
    `-- b.scss

1 directory, 4 files

While with coffee compiler, you will get correct:

.
|-- a.js
|-- a.coffee
`-- directory
    |-- b.coffee
    `-- b.js

1 directory, 4 files

Using gulpjs

Required packages package.json:

"gulp": "~3.4.0",

"gulp-ruby-sass": "~0.2.0",
"gulp-coffee": "~1.2.5",
"gulp-util": "~2.2.12",

Inside gulpfile.js:

var gulp = require('gulp');
    sass = require('gulp-ruby-sass'),
    gutil = require('gulp-util')
    coffee = require('gulp-coffee');

    // minifycss = require('gulp-minify-css'),
    // jshint = require('gulp-jshint'),
    // clean = require('gulp-clean'),
    // concat = require('gulp-concat'),
    // notify = require('gulp-notify'),
    // cache = require('gulp-cache'),
    // livereload = require('gulp-livereload'),
    // lr = require('tiny-lr'),
    // server = lr();

gulp.task('styles', function() {
  return gulp.src(['css/**/*.scss', '!css/**/_*.scss'])
    .pipe(sass({loadPath: ['css/']}).on('error', gutil.log)) // you need to use this `error` event, otherwise gulp watch would stop on every error
    // .pipe(sass({includePaths: ['css/'], errLogToConsole: true})) // this work with gulp-sass, which is quicker but less reliable
    .pipe(gulp.dest('css/'));
});

gulp.task('coffee', function() {
  gulp.src('./js/**/*.coffee')
      .pipe(coffee().on('error', gutil.log))
      .pipe(gulp.dest('./js'));
});

gulp.task('watch', function() {
    gulp.watch('./js/**/*.coffee', function(event) {
      console.log('File '+event.path+' was '+event.type+', running tasks...');
      gulp.run('coffee');
    });

    gulp.watch(['css/**/*.scss', '!css/**/_*.scss'], function(event) {
      console.log('File '+event.path+' was '+event.type+', running tasks...');
      gulp.run('styles');
    });
});