efficient express, coffee-script, jade, sass, gulp-watch w/ livereload

Watching for changes and serving coffee-script and sass|scss

fisrt, last require some magic.

var http = require('http')
, path = require('path')
, Promise = Promise || require('es6-promise').Promise
, express = require('express')
, tinylr = require('tiny-lr')

, gulp = require('gulp')
, gutil = require('gulp-util')
, livereload = require('gulp-livereload')
, sass = require('gulp-ruby-sass')  || require('gulp-sass')
, coffee = require('gulp-coffee')
, jade = require('gulp-jade')
, clean = require('gulp-clean')

, DIST = './dist'
, SRC = './src'
, PORT = 8000
, PORT_LR = PORT + 1

, app = express()
, log = gutil.log
, bold = gutil.colors.bold
, magenta = gutil.colors.magenta
, globs = {}
;

globs.sass = [path.join(SRC, "/**/*.{sass,scss}")]
globs.coffee = [path.join(SRC, "/**/*.coffee")]
globs.jade = [path.join(SRC, "/**/*.{html,jade}")]

function errorHandler (err) {
  console.log(err)
}

now, lets define a two servers.

* app - a basic static express serving ./dist/ on localhost:8000

* lrUp - a promise wrap around tiny-lr server (for some livereload awesomeness) on localhost:8001

app.use(require('connect-livereload')({port: PORT_LR}))
app.use('/', express.static(DIST))

http.createServer(app).listen(PORT, function() {
  log("Started express server on", magenta("http://localhost:" + PORT));
});

lrUp = new Promise(function(resolve, reject) {
  lrServer = tinylr()
  lrServer.listen(PORT_LR, function(err) {
    if (err) return reject(err)
    resolve(lrServer)
  })
})

defining the first project wise compilation round.

gulp.task('compile:sass', function(){
  return gulp.src(globs.sass)
    //.pipe(clean())
    .pipe(sass({sourcemap: true}).on('error', errorHandler))
    .pipe(gulp.dest(DIST))
})

gulp.task('compile:coffee', function(){
  return gulp.src(globs.coffee)
    //.pipe(clean())
    .pipe(coffee({bare: true, sourceMap: true}).on('error', errorHandler))
    .pipe(gulp.dest(DIST))
})

gulp.task('compile:jade', function(){
  return gulp.src(globs.jade)
    //.pipe(clean())
    .pipe(jade().on('error', errorHandler))
    .pipe(gulp.dest(DIST))
})

and our watchers

// watcher factory
function watcher (task) {
  return function(evt){
    lrUp.then(function(lrServer) {
      log("changed:", magenta(path.relative(process.cwd(), evt.path)));
      // reloading a single file once :)
      gulp.src(evt.path)
        .pipe(task())
        .pipe(livereload(lrServer))
        .pipe(gulp.dest(DIST))
    })
    .catch(errorHandler)
  }
}

gulp.task('watch:sass', function(){
  gulp.watch(globs.sass, watcher(function(){
    return sass({sourcemap: true}).on('error', errorHandler)
  }))
})

gulp.task('watch:coffee', function(){
  gulp.watch(globs.coffee, watcher(function(){
    return coffee({bare: true, sourceMap: true}).on('error', errorHandler)
  }))
})

gulp.task('watch:jade', function(){
  gulp.watch(globs.jade, watcher(function(){
    return jade().on('error', errorHandler)
  }))
})

gulp.task('watch', ['watch:coffee', 'watch:sass'], function(){
  gulp.start('compile:coffee', 'compile:sass', 'compile:jade')
})

gulp.start('watch')

and finally, we run our task with:

gulp.start('watch')