Using child_process.exec to launch Sass on file change

gulpfile.coffee

exec = require('child_process').exec
_ = require('lodash')
autoprefix = require('gulp-autoprefixer')
chalk = require('chalk')
concat = require('gulp-concat')
es = require('event-stream')
gulp = require('gulp')
gutil = require('gulp-util')
order = require('gulp-order')
plumber = require('gulp-plumber')
sass = require('gulp-ruby-sass')
uglify = require('gulp-uglify')
rename = require('gulp-rename')

express = require('express')
app = express()
serverRoot = '/Users/hex/dev/ecommercednd/_site_dev'

source = {
  coffee: '_coffee/**/*.coffee'
  sass: '_sass/style.scss'
  css: '_sass/css_output/*.css'
  vendorJS: [
    'bower_components/foundation/js/vendor/modernizr.js'
  ]
  foundationJS: [
    'foundation.js'
    #'foundation.abide.js'
    #'foundation.accordion.js'
    'foundation.alert.js'
    #'foundation.clearing.js'
    'foundation.dropdown.js'
    'foundation.equalizer.js'
    #'foundation.interchange.js'
    #'foundation.joyride.js'
    #'foundation.offcanvas.js'
    #'foundation.orbit.js'
    'foundation.reveal.js'
    'foundation.slider.js'
    'foundation.tab.js'
    'foundation.tooltip.js'
    #'foundation.topbar.js'
    'foundation.magellan.js'
  ]
}

dest = {
  assets: 'assets'
  css: '_sass/css_output'
}

sassExec = (filePath) ->
  relativePath = _.last( filePath.split(process.cwd() + '/') )
  filenameNoExt = _.first(
    _.last( relativePath.split('/') ).split('.scss')
  )
  outputFolder = if dest.css? then dest.css else process.cwd()
  outputPath = "#{outputFolder}/#{filenameNoExt}.css"

  sassArgs = [
    '--style nested'
    '--precision 7'
    '--unix-newlines'
  ].join(' ')

  command = "bundle exec sass #{sassArgs} #{relativePath} #{outputPath}"

  console.log("Running Sass on #{relativePath}")
  console.log(command)

  exec(command, (error, stdout, stderr) ->
    console.log('Sass:')
    console.log(stdout.trim())
    console.log(stderr)

    if error?
      console.log("exec error: #{error}")
  )

gulp.task('css', ->
  return gulp.src(source.css)
    .pipe( plumber() )
    .pipe( autoprefix() )
    .pipe( gulp.dest(dest.assets) )
)

gulp.task('coffee', ->
  return gulp.src(source.coffee)
    .pipe( plumber() )
    .pipe( coffee({map: false}).on('error', gutil.log) )
    .pipe( concat('main.js') )
    .pipe( gulp.dest(dest.assets) )
)

gulp.task('vendorJS', ->
  return gulp.src(source.vendorJS)
    .pipe( gulp.dest(dest.assets) )
)

gulp.task('foundationJS', ->
  foundationWithPath = _.map(
    source.foundationJS
    (filename) ->
      'bower_components/foundation/js/foundation/'+filename
  )

  return gulp.src(foundationWithPath)
    .pipe( concat('foundation.js') )
    .pipe( uglify({ mangle: false, preserveComments: 'some' }) )
    .pipe( rename({suffix: '.min'}) )
    .pipe( gulp.dest(dest.assets) )
)

gulp.task('server', ->
  app.use( express.static(serverRoot) )
  app.listen( process.env.PORT || 8080 )
  gutil.log(gutil.colors.blue('HTTP server listening on port 8080'))
)

gulp.task('watch', ['server'], ->
  gulp.watch( source.sass, (event) ->
    sassExec(event.path)
  )
  gulp.watch( source.css, ['css'] )
)

gulp.task(
  'default'
  [
    'vendorJS'
    'foundationJS'
    'server'
    'watch'
  ]
)