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

#express

#livereload

#nodejs

#gulp

#tiny-lr

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: