working example of gulp, coffeescript, react, jsx, browserify

gulpfile.coffee

sys            = require "sys"
exec           = require("child_process").exec
spawn          = require("child_process").spawn
browserify     = require "browserify"
watchify       = require "watchify"
coffee_react   = require "coffee-reactify"
gulp           = require "gulp"
jade           = require "gulp-jade"
plumber        = require "gulp-plumber"
reload         = require "gulp-livereload"
source         = require "vinyl-source-stream"
sass           = require "gulp-sass"
concat         = require "gulp-concat"
cssmin         = require "gulp-minify-css"
autoprefixer   = require "gulp-autoprefixer"

PROD  = process.env.ENV is 'PROD'

files =
  html:
    src: "src/client/**/*.jade"
    dest: "public/"

  javascripts:
    src:   "./src/client/app/app.coffee"
    watch: "src/client/**/*.coffee"
    name:  "app.js"
    dest:  "public/javascripts/"

  stylesheets:
    src: [
      "src/client/stylesheets/_variables.scss"
      "src/client/stylesheets/_mixins.scss"
      "src/client/stylesheets/vendor/*"
      "src/client/stylesheets/**/*.*"
    ]
    name: "app.css"
    dest: "public/stylesheets/"


# Browserify. We create the browserify instance outside the normal gulp tasks.
# We'll use gulp.watch to watch for any changes for files inside the
# app folder and trigger a rebundle.

args =
  extensions: [".coffee", ".js"]
args[k] = v for k,v of watchify.args

b = browserify args
b.add files.javascripts.src
b.transform coffee_react

bundler = b


bundle = (ids)->
  bundler.bundle()
    .on "error", (error) -> console.log error
    .pipe source(files.javascripts.name)
    .pipe gulp.dest(files.javascripts.dest)

gulp.task "javascripts", -> bundle

gulp.task "stylesheets", ->

  css = gulp.src files.stylesheets.src
    .pipe plumber()
    .pipe concat(files.stylesheets.name)
    .pipe sass()
    .pipe autoprefixer
      browsers: ["ios >= 5", "android >= 2"],
      cascade: true

  if PROD
    css = css.pipe cssmin()

  css.pipe gulp.dest(files.stylesheets.dest)


gulp.task "html", ->

  gulp.src files.html.src
    .pipe plumber()
    .pipe jade
      pretty: not PROD
    .pipe gulp.dest(files.html.dest)


gulp.task "watch", ->

  reload.listen()

  gulp.watch files.stylesheets.src,      ["stylesheets"]
  gulp.watch files.html.src,             ["html"]

  gulp.watch("public/**/*").on "change", reload.changed

gulp.task "auto-reload", ->
  server   = null
  frontend = null

  # run watchify
  bundler = watchify b
  bundler.on "update", bundle
  bundle()

  reload_server = ->
    server.kill() if server?
    server = spawn "./node_modules/coffee-script/bin/coffee", ["./src/server/app.coffee"], stdio: "inherit"

  reload_frontend = ->
    frontend.kill() if frontend?
    frontend = spawn "./node_modules/gulp/bin/gulp.js", ["watch", "--require coffee-script"], stdio: "inherit"

  gulp.watch "gulpfile.coffee",   reload_frontend
  gulp.watch "./src/server/**/*", reload_server

  reload_server()
  reload_frontend()

gulp.task "test", ->

  gulp.watch files.javascripts.watch, ->
    exec "npm test", (err, stdout) ->
      sys.puts stdout


gulp.task "build",   ["javascripts", "stylesheets", "html"]
gulp.task "default", ["build", "auto-reload"]