const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const del = require('del');
const runSequence = require('run-sequence');
const responsiveGm = require('gulp-responsive-images');
const imagemin = require('gulp-imagemin');
const reload = browserSync.reload;

gulp.task('default', function() {
    console.log('Hello World')
});

// use GM then move to folder responsive
gulp.task('imagesgm', function() {
    return gulp.src('app/images_src/**/*')
        .pipe(responsiveGm({
            '*.jpg': [{
                width: 1600,
                suffix: '_large_2x',
                quality: 75
            }, {
                width: 1600,
                suffix: '_large_1x',
                quality: 50
            }, {
                width: 600,
                height: 400,
                crop: 'center',
                suffix: '_medium_2x',
                quality: 75
            }, {
                width: 600,
                height: 400,
                crop: 'center',
                suffix: '_medium_1x',
                quality: 50
            }, {
                width: 300,
                height: 250,
                crop: 'center',
                suffix: '_small',
                quality: 50
            }],
        }))
        .pipe(gulp.dest('app/responsive/'));
});

// use imagemin then move to folder images
gulp.task('imagesmin', () => {
    return gulp.src('app/responsive/**/*')
        .pipe($.cache($.imagemin()))
        .pipe(gulp.dest('app/images/'));
});

// copies any images in fixed to images folder
gulp.task('copy-fixed-images', function() {
    return gulp.src('./app/images_src/fixed/**/*')
        .pipe(gulp.dest('./app/images/'));
});

// cleans responsive folder
gulp.task('responsive-tidy', function() {
    return del([
        './app/responsive/**/*'
    ]);
})

// combo build task for responsive (gm) and min images
gulp.task('build-images', function(callback) {
    runSequence('imagesgm', ['imagesmin', 'copy-fixed-images'],
        'responsive-tidy',
        callback);
});

// serve to browser (Chrome)
gulp.task('serve', function() {
    browserSync.init({
        port: 9000,
        browser: "google chrome",
        server: {
            baseDir: "./"
        }
    });
});