var gulp = require('gulp'),
	connect = require('gulp-connect'),
	browserify = require('gulp-browserify'),
	concat = require('gulp-concat'),
	compass = require('gulp-compass'),
	minifycss        = require('gulp-minify-css'),
    rename           = require('gulp-rename'),
	port = process.env.port || 5000;

gulp.task('browserify',function(){
	gulp.src('./public/app/js/main.js')
	.pipe(browserify({
		transform: 'reactify',
	}))
	.pipe(gulp.dest('./public/dist/js'))
});

// live reload
gulp.task('connect',function(){
	connect.server({
		// root:'./',
		port: port,
		livereload: true,
	})
})

// reload Js
gulp.task('js',function(){
	gulp.src('./public/dist/**/*.js')
	.pipe( connect.reload() )
})

gulp.task('html',function(){
	gulp.src('./public/app/**/*.html')
	.pipe( connect.reload() )
});

gulp.task("style",function() {
  	gulp.src(['./public/scss/*.scss'])
  			.pipe(compass({
  				
  				css:'./public/css',
  				sass:'./public/scss',
  				image:'.public/img'
  				
  			}))
  			.pipe(gulp.dest('./public/css'))
			.pipe(rename({suffix:".min"}))
			.pipe(minifycss())
			.pipe(gulp.dest("./public/css"));
    
})

gulp.task('watch',function(){
	gulp.watch('./public/dist/**/*.js',['js']);
	gulp.watch('./public/app/**/*.html',['html']);
	gulp.watch('./public/app/js/**/*.js',['browserify']);
	gulp.watch('./public/scss/*.scss',["style"]);
})

gulp.task('default',['browserify']);

gulp.task('serve',['browserify','watch','style']);