var browserify = require('browserify'),
    tsify = require('tsify'),
    gulp = require('gulp'),
    sass = require('gulp-sass'),
    ts = require('gulp-typescript'),
    autoprefixer = require('gulp-autoprefixer'),
    source = require('vinyl-source-stream'),
    buffer = require('vinyl-buffer'),
    tslint = require('gulp-tslint'),
    uglify = require('gulp-uglify'),
    browserSync = require('browser-sync');

var entryPoint = './src/scripts/main.ts',
    browserDir = './',
    sassWatchPath = './src/styles/**/*.scss',
    jsWatchPath = './src/scripts/**/*.ts',
    htmlWatchPath = './**/*.html';


gulp.task('lint:ts', function() {
    return gulp.src('./src/scripts/**/*.ts')
        .pipe(tslint({
            formatter: "verbose"
        }))
        .pipe(tslint.report())
});

gulp.task('compile:ts',["lint:ts"], function () {
    return browserify()
        .add(entryPoint)
        .plugin(tsify)
        .bundle()
        .on('error', function (error) { console.error(error.toString()); })
        .pipe(source('bundle.js'))
        .pipe(buffer())
        .pipe(uglify())
        .pipe(gulp.dest('./build/js'));
});

gulp.task('browser-sync', function () {
    const config = {
        server: {baseDir: browserDir}
    };

    return browserSync(config);
});

gulp.task('sass', function () {
  return gulp.src(sassWatchPath)
    .pipe(sass({outputStyle: 'compressed'}).on('error', sass.logError))
    .pipe(autoprefixer({
        browsers: ['last 2 versions']
    }))
    .pipe(gulp.dest('./build/css'))
    .pipe(browserSync.reload({stream: true}));
});

gulp.task('watch', function () {
    gulp.watch(jsWatchPath, ['compile:ts']);
    gulp.watch(sassWatchPath, ['sass']);
    gulp.watch(htmlWatchPath, function () {
        return gulp.src('')
            .pipe(browserSync.reload({stream: true}))
    });
});

gulp.task('run', ['compile:ts', 'sass', 'watch','browser-sync']);