gulp-react

var gulp = require('gulp');
var reactify = require('reactify');
var browserify = require('gulp-browserify');
var browserSync = require('browser-sync').create();
var sass = require('gulp-sass');

function swallowError(error){
	console.log(error.toString());
    this.emit('end');
}

gulp.task('scripts', function(){
	gulp.src('src/js/main.js')
		.pipe(browserify({
			debug: true,
			insertGlobals: false,
			transform: [reactify]
			}))
		.on('error', swallowError)
		.pipe(gulp.dest('dist/js/'))
		.pipe(browserSync.stream());
})


gulp.task('browser-sync', function() {
    browserSync.init({
        server: {
            baseDir: "./dist"
        }
    });
});


gulp.task('styles', function(){
	gulp.src('src/styles/*.scss')
		.pipe(sass())
		.on('error', swallowError)
		.pipe(gulp.dest('dist/styles/'))
		.pipe(browserSync.stream());
})

gulp.task('watcher', function(){
	gulp.watch('src/styles/*.scss', ['styles'])
	gulp.watch(['./src/**/*.js', './src/**/*.jsx'], ['scripts']);
	gulp.watch('./dist/index.html', browserSync.reload);
})

gulp.task('default', [ 'scripts', 'watcher', 'browser-sync' ]);