/*
Create package.json and install all packages:

1. npm init
2. npm install -g gulp
3. npm install gulp gulp-babel babel-preset-es2015 gulp-concat gulp-csso gulp-rename gulp-sass gulp-uglify gulp-watch browser-sync --save-dev

Expected file structure:

./css/src/*.scss 
In this folder you can have as much SASS files as you want, but you will need to have a "theme.scss" file that will import
all other SASS files, because GULP would look for that file in order to convert it to CSS syntax. 

./js/src/*.js -> You can have as much JS files as you want. 

commands:
"gulp" - will watch all your theme files and reload/inject on change.
"gulp production" - will minify CSS and JS files. 

NOTE - I'm using localhost:8888 for proxy in browser-sync config. Change it accordingly. 

*/

var gulp        = require('gulp');
var concat      = require('gulp-concat');
var sass        = require('gulp-sass');
var watch       = require('gulp-watch');
var babel       = require('gulp-babel');
var browserSync = require('browser-sync');
var csso        = require('gulp-csso');
var uglify      = require('gulp-uglify');
var rename      = require('gulp-rename');


gulp.task('scripts', function() {
    gulp.src('./js/src/*.js')
        .pipe(concat('theme.js'))
        .pipe(babel({ presets: ['es2015'] }))
        .pipe(gulp.dest('./js/'));
});

gulp.task('sass', function() {
    gulp.src('./css/src/theme.scss')
        .pipe(sass())
        .pipe(gulp.dest('./css'));
});

//run "gulp production" so you can serve minifed files when you deploy to production
gulp.task('production', function() {
    gulp.src('./js/theme.js')
        .pipe(uglify())
        .pipe(rename({
             suffix: '.min'
         }))
        .pipe(gulp.dest('./js'));

    gulp.src('./css/theme.css')
        .pipe(csso())
        .pipe(rename({
             suffix: '.min'
         }))
        .pipe(gulp.dest('./css'));
});

gulp.task('watch',['scripts', 'sass'], function () {
    gulp.watch('./js/src/*.js' , ['scripts']);
    gulp.watch('./css/src/*.scss' , ['sass']);
});

gulp.task('sync', function() {
    var options = {
        proxy: 'localhost:8888',
        port: 3000,
        files: [
            '**/*.*'
        ],
        ghostMode: {
            clicks: true,
            location: false,
            forms: true,
            scroll: true
        },
        injectChanges: true,
        logFileChanges: true,
        logLevel: 'debug',
        logPrefix: 'gulp-patterns',
        notify: true,
        reloadDelay: 0
    };
    browserSync(options);
});

//When you run "gulp" it will run all the tasks that you specify in the array. Notice that the "production" task
//is not specified, because it should be used at deployment time when everything is done. 
gulp.task('default', ['scripts', 'sass', 'watch', 'sync']);