eirikb/gulpfile.js

## gulpfile.js
var gulp = require('gulp');
var fs = require('fs');
var browserify = require('browserify');
var babelify = require('babelify');
var watchify = require('watchify');
var source = require('vinyl-source-stream');
var livereload = require('gulp-livereload');
var less = require('gulp-less');
var concat = require('gulp-concat');
var connect = require('gulp-connect');

var cors = function (req, res, next) {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Headers', '*');
  next();
};

var extensions = ['.js', '.json', '.es6', '.jsx'];
var bundler = watchify(browserify({
  debug: false,
  extensions: extensions
}))
  .transform(babelify.configure({
    extensions: extensions,
    presets: ['react', 'es2015']
  }))
  .require('./src/index.jsx', {entry: true});

livereload.listen();

function bundle() {
  return bundler
    .bundle()
    .on('error', function (err) {
      console.error('' + err);
    })
    .pipe(source('app.js'))
    .pipe(gulp.dest('dist/'))
    .pipe(livereload());
}

gulp.task('bundle', bundle);
bundler.on('update', bundle);
bundler.on('log', console.log);

gulp.task('less', function () {
  return gulp.src('./src/less/*.less')
    .pipe(less({compress: true}))
    .pipe(concat('app.css'))
    .pipe(gulp.dest('dist/'))
    .pipe(livereload());
});

gulp.task('watch', function () {
  gulp.watch('./src/less/*.less', ['less']);
  gulp.watch('./src/index.html', ['html']);
});

gulp.task('webserver', function () {
  connect.server({
    root: 'dist',
    livereload: true,
    port: 8000,
    middleware: function () {
      return [cors];
    }
  });
});

gulp.task('html', function () {
  gulp.src('./src/index.html')
    .pipe(gulp.dest('dist/'));
});

gulp.task('default', ['bundle', 'less', 'html', 'watch', 'webserver']);

## hello-world.jsx
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return <p>Hello, world!</p>;
  }
}

export default HelloWorld;

## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="app.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>

## index.jsx
import React from 'react';
import HelloWorld from './hello-world';

React.render(
  <HelloWorld />,
  document.body
);

## install.sh
npm install --save-dev gulp gulp-concat gulp-connect gulp-less gulp-livereload vinyl-source-stream browserify babelify watchify babel-preset-es2015 babel-preset-react react
	var gulp = require('gulp');
	var fs = require('fs');
	var browserify = require('browserify');
	var babelify = require('babelify');
	var watchify = require('watchify');
	var source = require('vinyl-source-stream');
	var livereload = require('gulp-livereload');
	var less = require('gulp-less');
	var concat = require('gulp-concat');
	var connect = require('gulp-connect');

	var cors = function (req, res, next) {
	res.setHeader('Access-Control-Allow-Origin', '*');
	res.setHeader('Access-Control-Allow-Headers', '*');
	next();
	};

	var extensions = ['.js', '.json', '.es6', '.jsx'];
	var bundler = watchify(browserify({
	debug: false,
	extensions: extensions
	}))
	.transform(babelify.configure({
	extensions: extensions,
	presets: ['react', 'es2015']
	}))
	.require('./src/index.jsx', {entry: true});

	livereload.listen();

	function bundle() {
	return bundler
	.bundle()
	.on('error', function (err) {
	console.error('' + err);
	})
	.pipe(source('app.js'))
	.pipe(gulp.dest('dist/'))
	.pipe(livereload());
	}

	gulp.task('bundle', bundle);
	bundler.on('update', bundle);
	bundler.on('log', console.log);

	gulp.task('less', function () {
	return gulp.src('./src/less/*.less')
	.pipe(less({compress: true}))
	.pipe(concat('app.css'))
	.pipe(gulp.dest('dist/'))
	.pipe(livereload());
	});

	gulp.task('watch', function () {
	gulp.watch('./src/less/*.less', ['less']);
	gulp.watch('./src/index.html', ['html']);
	});

	gulp.task('webserver', function () {
	connect.server({
	root: 'dist',
	livereload: true,
	port: 8000,
	middleware: function () {
	return [cors];
	}
	});
	});

	gulp.task('html', function () {
	gulp.src('./src/index.html')
	.pipe(gulp.dest('dist/'));
	});

	gulp.task('default', ['bundle', 'less', 'html', 'watch', 'webserver']);
	import React from 'react';

	class HelloWorld extends React.Component {
	render() {
	return <p>Hello, world!</p>;
	}
	}

	export default HelloWorld;
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="app.css">
	</head>
	<body>
	<script src="app.js"></script>
	</body>
	</html>
	import React from 'react';
	import HelloWorld from './hello-world';

	React.render(
	<HelloWorld />,
	document.body
	);