uzimith/gulpfile.js

## gulpfile.js
var gulp = require('gulp')
var watchify = require('watchify');
var browserify = require('browserify');
var gutil = require('gulp-util');
var buffer = require('vinyl-buffer');
var source = require('vinyl-source-stream');
var sourcemaps = require('gulp-sourcemaps');
var streamify = require('gulp-streamify');
var uglify = require('gulp-uglify');

watchify.args.debug = true

var target = './index.coffee'

var bundler = watchify(browserify(target, watchify.args));

function bundle() {
  return 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('.'));
}

bundler.on('update', bundle);
bundler.on('log', gutil.log.bind(gutil, 'log'))

gulp.task('watch', bundle);

gulp.task('build', function() {
  browserify(target, watchify.args).bundle()
    .pipe(source('bundle.js'))
    .pipe(buffer())
    .pipe(streamify(uglify()))
    .pipe(gulp.dest('.'));
})

## 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: =>
    jade.compile("""
      #counter
        span Count :
        button(onClick=tick)= count
    """)(_.assign {}, @, @props, @state)

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

## index.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>React + Jade + CoffeeScript</title>
  </head>
  <body>
    <div id="container"></div>
    <script src="bundle.js"></script>
  </body>
</html>

## 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"
  }
}
	var gulp = require('gulp')
	var watchify = require('watchify');
	var browserify = require('browserify');
	var gutil = require('gulp-util');
	var buffer = require('vinyl-buffer');
	var source = require('vinyl-source-stream');
	var sourcemaps = require('gulp-sourcemaps');
	var streamify = require('gulp-streamify');
	var uglify = require('gulp-uglify');

	watchify.args.debug = true

	var target = './index.coffee'

	var bundler = watchify(browserify(target, watchify.args));

	function bundle() {
	return 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('.'));
	}

	bundler.on('update', bundle);
	bundler.on('log', gutil.log.bind(gutil, 'log'))

	gulp.task('watch', bundle);

	gulp.task('build', function() {
	browserify(target, watchify.args).bundle()
	.pipe(source('bundle.js'))
	.pipe(buffer())
	.pipe(streamify(uglify()))
	.pipe(gulp.dest('.'));
	})
	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: =>
	jade.compile("""
	#counter
	span Count :
	button(onClick=tick)= count
	""")(_.assign {}, @, @props, @state)

	React.render(React.createFactory(Counter)(), document.getElementById('container'))
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>React + Jade + CoffeeScript</title>
	</head>
	<body>
	<div id="container"></div>
	<script src="bundle.js"></script>
	</body>
	</html>
	{
	"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"
	}
	}