.gitignore

node_modules
.DS_Store
template.js
bundle.js.map
bundle.js
index.html
lib

gulpfile.coffee

gulp = require('gulp')
watchify = require('watchify')
browserify = require('browserify')
gutil = require('gulp-util')
buffer = require('vinyl-buffer')
source = require('vinyl-source-stream')
sourcemaps = require('gulp-sourcemaps')
streamify = require('gulp-streamify')
uglify = require('gulp-uglify')
reactJade = require('gulp-react-jade')
jade = require('gulp-jade')
del = require('del')

bundle = ->
  bundler
  .bundle()
  .on('error', gutil.log.bind(gutil, 'error'))
  .pipe(source('bundle.js'))
  .pipe(buffer())
  .pipe(sourcemaps.init(loadMaps: true))
  .pipe(sourcemaps.write('./'))
  .pipe(gulp.dest('./lib'))

watchify.args.debug = true
target = './index.coffee'
bundler = watchify(browserify(target, watchify.args))
bundler.on 'update', bundle
bundler.on 'log', gutil.log.bind(gutil, 'log')

gulp.task 'build:react-jade', ->
  gulp.src('template.jade')
    .pipe reactJade()
    .pipe gulp.dest('./')

gulp.task 'build:jade', ->
  gulp.src('index.jade')
    .pipe jade()
    .pipe gulp.dest('./lib')

gulp.task 'watch', [
  'build:react-jade'
  'build:jade'
  ], -> do bundle

gulp.task 'build', [
  'build:react-jade'
  'build:jade'
  ], ->
    browserify(target, watchify.args)
    .bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(streamify(uglify()))
    .pipe gulp.dest('./lib')

gulp.task 'clean', ->
  del.sync([
    './lib'
    './template.js'
    './bundle.js'
    './index.html'
  ])

index.coffee

React = require('react')
jade = require('react-jade')
_ = require('lodash')

class Counter extends React.Component
  constructor: ->
    @state =
      count: 0
  tick: =>
    @setState count: @state.count + 1
  render: =>
    template = require './template'
    template _.extend {}, @, @props, @state


React.render(React.createFactory(Counter)(), document.getElementById('container'))

index.jade

doctype html
html
  head
    meta(charset="utf-8")
    meta(name="viewport", content="width=device-width")
    title React + Jade + CoffeeScript
  body
    #container
    script(src="bundle.js")

package.json

{
  "name": "test",
  "version": "0.0.1",
  "description": "",
  "repository": "",
  "main": "test.coffee",
  "scripts": {
    "start": "watchify -o bundle.js -v -d ."
  },
  "author": "",
  "browserify": {
    "transform": [
      [
        "reactify",
        {
          "harmony": true
        }
      ],
      "coffeeify",
      "react-jade"
    ]
  },
  "dependencies": {
    "lodash": "^3.2.0",
    "react": "^0.13.0-beta.1",
    "react-jade": "^2.3.0"
  },
  "devDependencies": {
    "coffeeify": "^1.0.0",
    "browserify": "^8.1.0",
    "gulp": "^3.8.10",
    "gulp-plumber": "^0.6.6",
    "gulp-sourcemaps": "^1.3.0",
    "gulp-streamify": "0.0.5",
    "gulp-uglify": "^1.1.0",
    "gulp-util": "^3.0.2",
    "gulp-watch": "^4.1.1",
    "lodash": "^2.4.1",
    "process": "^0.10.0",
    "jade": "^1.9.2",
    "react-jade": "^2.3.0",
    "reactify": "^0.17.1",
    "vinyl-buffer": "^1.0.0",
    "vinyl-source-stream": "^1.0.0",
    "watchify": "^2.2.1",
    "gulp-react-jade": "git://github.com/mizchi/gulp-react-jade",
    "coffee-script": "^1.9.1",
    "gulp-jade": "^1.0.0",
    "del": "^1.1.1"
  }
}

template.jade

#counter
  span Count :
  button.btn(onClick=tick)= count