gulp MODERN (feb 2016), WORKING babel + react + sourcemaps. millions of outdated bad examples

.babelrc

{ "presets": ["react"], "sourceMaps": true }

gulpfile.js

var gulp = require('gulp');
var connect = require('gulp-connect');
var open = require('gulp-open');
var concat = require('gulp-concat');
var lint = require('gulp-eslint');
var babel = require('gulp-babel');
var browserify = require('browserify');
var source = require('vinyl-source-stream');
var babel = require('babelify');
var buffer = require('vinyl-buffer');
var sourcemaps = require('gulp-sourcemaps');

gulp.task('js', function() {
	browserify('./src/main.js', {debug: true})
		.transform(babel)
		.bundle()
		.on('error', console.error.bind(console))
		.pipe(source('bundle.js'))
		.pipe(buffer())
		// dont forget loadMaps or else it wont work in chrome
		.pipe(sourcemaps.init({loadMaps: true}))
		.pipe(sourcemaps.write('./'))
		.pipe(gulp.dest(config.paths.dist + '/scripts'))
		.pipe(connect.reload());