import { src, dest, watch, series, parallel } from 'gulp';
import plumber from 'gulp-plumber';
import stylus from 'gulp-stylus';
import postcss from 'gulp-postcss';
import autoprefixer from 'autoprefixer';
import lost from 'lost';
import rupture from 'rupture';
import cssnano from 'cssnano';
import pug from 'gulp-pug';
import babel from 'gulp-babel';
import concat from 'gulp-concat';
import uglify from 'gulp-uglify';
import imagemin from 'gulp-imagemin';
import svgmin from 'gulp-svgmin';
import { stream, init } from 'browser-sync';
import del from 'del';

export const clear = () => del('./dist');

export const live = () => init({
  server: './dist',
});

export const pages = () => src('./src/pages/*.pug')
  .pipe(plumber())
  .pipe(pug())
  .pipe(dest('./dist'))
  .pipe(stream());

export const styles = () => src('./src/assets/styles/style.styl')
  .pipe(plumber())
  .pipe(stylus())
  .pipe(postcss([
    rupture(),
    lost(),
    autoprefixer(),
    cssnano(),
  ]))
  .pipe(dest('./dist/assets/css'))
  .pipe(stream());

export const scripts = () => src('./src/assets/scripts/*.js')
  .pipe(plumber())
  .pipe(babel())
  .pipe(concat('script.js'))
  .pipe(uglify())
  .pipe(dest('./dist/assets/js'))
  .pipe(stream());

export const images = () => src('./src/assets/images/**/*')
  .pipe(plumber())
  .pipe(imagemin())
  .pipe(dest('./dist/assets/img'))
  .pipe(stream());

export const vectors = () => src('./src/assets/vectors/**/*')
  .pipe(svgmin())
  .pipe(dest('./dist/assets/svg'))
  .pipe(stream());

export const eyes = () => {
  watch('./src/assets/styles/**/*', styles);
  watch('./src/assets/scripts/**/*', scripts);
  watch('./src/assets/images/**/*', images);
  watch('./src/assets/vectors/**/*', vectors);
  watch('./src/pages/**/*', pages);
};

export const build = parallel(pages, styles, scripts, images, vectors);

export const server = series(clear, build, parallel(live, eyes));