'use strict'
/****************************************************************************************************/
//MODULES REQUIRE
/****************************************************************************************************/
const { src, dest, symlink, lastRun, task, watch, series, parallel } = require('gulp')
const less = require('gulp-less')
const validator = require('gulp-w3c-html-validator')
const fileinclude = require('gulp-file-include')
const postcss = require('gulp-postcss')
const csso = require('postcss-csso')
const customProperties = require('postcss-custom-properties')
const postcssNesting = require('postcss-nesting')
const postcssNested = require('postcss-nested')
const gulpPurgeCss = require('gulp-purgecss')
const autoprefixer = require('autoprefixer')
const postcssImport = require('postcss-import')
const postcssCustomMedia = require('postcss-custom-media')
const mqp = require('css-mqpacker')
const imagemin = require('gulp-imagemin')
const svgSprite = require('gulp-svg-sprite')
const mainNpmFiles = require('npmfiles')
const webpack = require('webpack')
const webp = require('gulp-webp')
const gulpwebpack = require('webpack-stream')
const favicons = require('gulp-favicons')
const plumber = require('gulp-plumber')
const newer = require('gulp-newer')
const debug = require('gulp-debug')
const gulpIf = require('gulp-if')
const del = require('del')
const flatten = require('gulp-flatten')
const remember = require('gulp-remember')
const cached = require('gulp-cached')
const path = require('path')
const browserSync = require('browser-sync').create()
/****************************************************************************************************/
//DEV OR PRODUCTION
/****************************************************************************************************/
const isDevelopment = !process.env.NODE_ENV || process.env.NODE_ENV === 'development'
/****************************************************************************************************/
//PATHS AND SETTINGS
/****************************************************************************************************/
const cms = {
  modx: {
    html: 'build/',
    css: 'build/assets/css/',
    js: 'build/assets/js/',
    img: 'build/assets/',
    libs: 'build/assets/libs/',
    fonts: 'build/assets/fonts/'
  }
}
/****************************************************************************************************/
//HTML task
/****************************************************************************************************/
const html = () =>
  src('src/*.html', { since: lastRun('html') })
    .pipe(plumber())
    .pipe(fileinclude())
    .pipe(dest(cms.modx.html))
/****************************************************************************************************/
//HTML templates task
/****************************************************************************************************/
const htmltemplates = () =>
  src('src/*.html')
    .pipe(plumber())
    .pipe(fileinclude())
    .pipe(dest(cms.modx.html))
/****************************************************************************************************/
//HTML validation task
/****************************************************************************************************/
const validation = () =>
  src('build/*.html')
    .pipe(validator())
    .pipe(validator.reporter())
/****************************************************************************************************/
//CSS task
/****************************************************************************************************/
const css = (cb) => {
  let processors = [
    postcssImport({ path: ['src/css'] }),
    customProperties({ preserve: true }),
    postcssCustomMedia,
    postcssNesting,
    postcssNested,
    autoprefixer({ cascade: false, flexbox: false }),
    mqp({ sort: true })
  ]
  src('src/css/style.css', { sourcemaps: true })
    .pipe(plumber())
    .pipe(less())
    .pipe(postcss(processors))
    .pipe(gulpIf(!isDevelopment, gulpPurgeCss({ content: ['src/*.html', 'src/templates/*.html', 'src/js/**/*.js'] })))
    .pipe(gulpIf(!isDevelopment, postcss([csso({ restructure: false, comments: false })])))
    .pipe(gulpIf(!isDevelopment, dest(cms.modx.css), dest(cms.modx.css, { sourcemaps: '.' })))
    .pipe(browserSync.stream())
  cb()
}
/****************************************************************************************************/
//JS task
/****************************************************************************************************/
const js = () =>
  src('src/js/main.js')
    .pipe(plumber())
    .pipe(gulpwebpack(require('./webpack.config.js'), webpack))
    .pipe(dest(cms.modx.js))
    .pipe(browserSync.stream())
/****************************************************************************************************/
//LIBS task
/****************************************************************************************************/
const libs = () =>
  src(mainNpmFiles(), { base: './node_modules' })
    .pipe(flatten({ includeParents: 1 }))
    .pipe(newer(cms.modx.libs))
    .pipe(dest(cms.modx.libs))
/****************************************************************************************************/
//FONTS task
/****************************************************************************************************/
const fonts = () =>
  src('src/fonts/**/*.*')
    .pipe(newer(cms.modx.fonts))
    .pipe(gulpIf(isDevelopment, symlink(cms.modx.fonts), dest(cms.modx.fonts)))
/****************************************************************************************************/
//IMG task (jpg,png,gif)
/****************************************************************************************************/
const img = () =>
  src(['src/img/**/*.*', 'src/images/**/*.*', '!src/img/icons/*.*'], { base: 'src' })
    .pipe(newer(cms.modx.img))
    .pipe(gulpIf(!isDevelopment, imagemin([
      imagemin.gifsicle({ interlaced: true }),
      imagemin.jpegtran({ progressive: true }),
      imagemin.optipng({ optimizationLevel: 5 }),
      imagemin.svgo({ removeViewBox: false, collapseGroups: true })
    ])))
    .pipe(gulpIf(!isDevelopment, dest(cms.modx.img), symlink(cms.modx.img)))
/****************************************************************************************************/
//IMG task (jpg,png,gif)
/****************************************************************************************************/
const webpimages = () =>
  src(['src/img/**/*.{jpg,png,gif}', 'src/images/**/*.{jpg,png,gif}', '!src/img/favicons/*.*'], {
    base: 'src',
    since: lastRun(webpimages)
  })
    .pipe(plumber())
    .pipe(webp())
    .pipe(dest('src'))
/****************************************************************************************************/
//SVG sprite icons
/****************************************************************************************************/
let config = {
  shape: {
    dimension: {
      maxWidth: 50,
      maxHeight: 50
    },
    spacing: {
      padding: 0,
      box: 'icon'
    },
    transform: [
      {
        svgo: {
          plugins: [
            { removeXMLNS: true },
            { cleanupListOfValues: true },
            { convertShapeToPath: false },
            { removeAttrs: { attrs: ['data-name', 'version'] } },
            { removeStyleElement: true },
            { removeScriptElement: true }
          ],
          floatPrecision: 1
        }
      }
    ]
  },
  svg: {
    xmlDeclaration: false,
    doctypeDeclaration: false,
    dimensionAttributes: false
  },
  mode: {
    stack: {
      dest: '.',
      sprite: 'img/sprite.svg',
      render: {
        css: {
          template: 'src/templates/icon_template.html',
          dest: 'css/modules/sprite.css'
        }
      }
    }
  }
}
const svgicons = () =>
  src('src/img/icons/*.svg')
    .pipe(cached('svg:icons'))
    .pipe(remember('svg:icons'))
    .pipe(svgSprite(config))
    .pipe(dest('src'))
/****************************************************************************************************/
//DEL build directory
/****************************************************************************************************/
const clean = () => {
  return del('build')
}
/****************************************************************************************************/
//Copy favicon
/****************************************************************************************************/
const faviconsGenerator = () =>
  src('src/img/favicons/favicon.png')
    .pipe(favicons({
      appName: 'My App',
      appShortName: 'App',
      appDescription: 'This is my application',
      background: '#020307',
      path: 'assets/img/favicons/',
      url: 'http://mysite.ru/',
      display: 'standalone',
      lang: 'ru-RU',
      orientation: 'portrait',
      scope: '/',
      start_url: '/',
      version: 1.0,
      logging: false,
      html: 'index.html',
      pipeHTML: true,
      replace: true,
      icons: {
        coast: false,
        firefox: false,
        windows: false,
        yandex: false
      }
    }))
    .pipe(dest('build/assets/img/favicons'))
/****************************************************************************************************/
//WATCHERS
/****************************************************************************************************/
const watchers = (cb) => {
  watch('src/*.html', html).on('unlink', (filepath) => {
    let filePathFromSrc = path.relative(path.resolve('src/'), filepath)
    let destFilePath = path.resolve(cms.modx.html, filePathFromSrc)
    del.sync(destFilePath)
  })
  watch('src/templates/*.html', htmltemplates)
  watch('build/*.html').on('change', browserSync.reload)
  watch('src/css/**/*.css', css)
  watch('src/css/**/*.less', css)
  watch('src/js/**/*.js', js)
  watch(['src/**/*.{jpg,png,gif,webp}', '!src/img/icons/'], img).on('unlink', (filepath) => {
    let filePathFromSrc = path.relative(path.resolve('src/'), filepath)
    let destFilePath = path.resolve(cms.modx.img, filePathFromSrc)
    del.sync(destFilePath)
  })
  watch('src/img/icons/*.svg', svgicons).on('unlink', (filepath) => {
    remember.forget('svg:icons', path.resolve(filepath))
    delete cached.caches['svg:icons'][path.resolve(filepath)]
  })
  watch('src/fonts/**/*.*', fonts).on('unlink', (filepath) => {
    let filePathFromSrc = path.relative(path.resolve('src/fonts'), filepath)
    let destFilePath = path.resolve(cms.modx.fonts, filePathFromSrc)
    del.sync(destFilePath)
  })
  cb()
}
/****************************************************************************************************/
//BROWSER-SYNC task
/****************************************************************************************************/
const serve = (cb) => {
  browserSync.init({
    server: {
      baseDir: './build/'
    },
    open: false,
    notify: false
  })
  cb()
}
/****************************************************************************************************/
//EXPORT TASKS
/****************************************************************************************************/
exports.html = html
exports.validation = validation
exports.css = css
exports.js = js
exports.libs = libs
exports.fonts = fonts
exports.img = img
exports.webp = webpimages
exports.svgicons = svgicons
exports.favicons = faviconsGenerator
exports.watchers = watchers
exports.serve = serve
exports.clean = clean
/****************************************************************************************************/
//GLOBAL TASKS
/****************************************************************************************************/
task('build', series(svgicons, parallel(html, css, js, libs, fonts, img)))
exports.dev = series('build', parallel(watchers, serve))