const {series, watch, src, dest, parallel} = require('gulp');

const postcss = require('gulp-postcss')
const livereload = require('gulp-livereload');
const zip = require('gulp-zip');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const cleancss = require('gulp-clean-css');

const purgecss = require('@fullhuman/postcss-purgecss')({

  // Specify the paths to all of the template files in your project 
  content: [
    './**/*.html',
    './src/css/**/*.css', // This file defines required styles for the Ghost editor
    // etc.
  ],

  // Include any special characters you're using in this regular expression
  defaultExtractor: content => content.match(/[\w-/:]+(?<!:)/g) || []
})

function serve(done) {
    livereload.listen();
    done();
}

function html() { 
    return src(['./**/*.html'])
        .pipe(livereload());
}
function css () {

  return src('src/css/yuika.css')
    // ...
    .pipe(concat('yuika.css'))
    .pipe(postcss([
      // ...
      require('postcss-import'),
      require('tailwindcss'),
      require('autoprefixer'),
      ...process.env.NODE_ENV === 'production' ? [purgecss] : []
      // ...
    ]))
    // ...
    .pipe(cleancss({compatibility: 'ie8'}))
    .pipe(dest('dist/'))
    .pipe(livereload())
}

const cssWatcher = () => watch('src/css/**', css);
const htmlWatcher = () => watch(['./**/*.html'], html);
const watcher = parallel(cssWatcher, htmlWatcher);
const build = css;
const dev = series(build, serve, watcher);


exports.build = build;
exports.dev = dev;
exports.default = build;