gulpfile.js

import autoprefixer from 'autoprefixer';
import bs from 'browser-sync';
import cssnano from 'cssnano';
import del from 'del';
import ESLintPlugin from 'eslint-webpack-plugin';
import gulp from 'gulp';
import flatten from 'gulp-flatten';
import headerComment from 'gulp-header-comment';
import gulpif from 'gulp-if';
import imagemin, { gifsicle, mozjpeg, svgo } from 'gulp-imagemin';
import gulpMode from 'gulp-mode';
import postcss from 'gulp-postcss';
import purgecss from 'gulp-purgecss';
import gulpSass from 'gulp-sass';
import sassGlob from 'gulp-sass-glob';
import sourcemaps from 'gulp-sourcemaps';
import uglify from 'gulp-uglify';
import webp from 'gulp-webp';
import imageminPngquant from 'imagemin-pngquant';
import * as dartSass from 'sass';
import named from 'vinyl-named';
import webpack from 'webpack-stream';

const { src, dest, series, parallel, watch } = gulp;
const browserSync = bs.create();
const mode = gulpMode();
const sass = gulpSass(dartSass);

const CONFIG = {
  // url: 'http://yourlocaldomain.int',
  baseDir: './public',
  files: {
    src: {
      cwd: 'theme',                                               // your source folder
      styles: 'main.scss',                                        // main scss file inside cwd
      scripts: ['main.js'],                                       // main js file inside cwd
      graphics: '**/*.{png,jpg,svg,gif}',                         // all images inside cwd
      fonts: '**/*.{ttf,eot,woff,woff2,otf}',                     // all fonts inside cwd
      markup: ['./public/**/*.html', './site/**/*.{php,html}'],   // all markup files for css purge
      media: '**/*.{mp4,webm,ogg}',                               // all media files inside cwd
    },
    dest: {
      cwd: 'public/resources',                                    // build folder (excludes 'static' folder inside subfolders listed below)
      styles: '/styles',
      scripts: '/scripts',
      graphics: '/graphics',
      fonts: '/fonts',
      media: '/media',
    }
  },
  purgecss: false,
  webp: false,
  https: false,
};

function clean() {
  const deletable = [
    `${CONFIG.files.dest.cwd}${CONFIG.files.dest.styles}/**/*`,
    `${CONFIG.files.dest.cwd}${CONFIG.files.dest.scripts}/**/*`,
    `${CONFIG.files.dest.cwd}${CONFIG.files.dest.graphics}/**/*`,
    `${CONFIG.files.dest.cwd}${CONFIG.files.dest.fonts}/**/*`,
    `!${CONFIG.files.dest.cwd}/static`,
    `!${CONFIG.files.dest.cwd}/**/static`
  ];

  return del(deletable);
}

function styles() {
  return src(CONFIG.files.src.styles, { cwd: CONFIG.files.src.cwd })
    .pipe(mode.development(sourcemaps.init()))
    .pipe(sassGlob())
    .pipe(sass({
      includePaths: ['node_modules'],
    }).on('error', sass.logError))
    .pipe(postcss([
      autoprefixer({ cascade: false, remove: false }),
      cssnano(),
    ]))
    .pipe(gulpif(CONFIG.purgecss, mode.production(purgecss({
      content: CONFIG.files.src.markup,
      fontFace: true,
      keyframes: true,
      variables: true,
    }))))
    .pipe(headerComment(`
        Generated on: <%= moment().format('DD-MM-YYYY hh:mm:ss') %>
        Unique ID: <%= Date.now() %>
    `))
    .pipe(mode.development(sourcemaps.write('')))
    .pipe(flatten())
    .pipe(dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.styles}`))
    .pipe(browserSync.stream());
}

function scripts() {
  return src(CONFIG.files.src.scripts, { cwd: CONFIG.files.src.cwd })
    .pipe(named())
    .pipe(webpack({
      mode: mode.development() ? 'development' : 'production',
      plugins: [new ESLintPlugin()],
      module: {
        rules: [
          {
            test: /\.m?js$/,
            resolve: {
              fullySpecified: false, // disable the behaviour
            },
          },
        ],
      },
    }))
    // .pipe(babel({ presets: ['@babel/env'] }))
    .pipe(mode.development(sourcemaps.init()))
    .pipe(uglify().on('error', (uglify) => {
        console.error(uglify.message);
        this.emit('end');
    }))
    .pipe(headerComment(`
    Generated on: <%= moment().format('DD-MM-YYYY hh:mm:ss') %>
    Unique ID: <%= Date.now() %>
    `))
    .pipe(mode.development(sourcemaps.write('')))
    .pipe(dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.scripts}`))
    .pipe(browserSync.stream());
}

function graphics() {
  return src(CONFIG.files.src.graphics, { cwd: CONFIG.files.src.cwd })
    .pipe(imagemin([
      gifsicle({interlaced: true}),
      mozjpeg({quality: 75, progressive: true}),
      imageminPngquant({
        quality: [0.7,0.9], // When used more then 70 the image wasn't saved
        speed: 1, // The lowest speed of optimization with the highest quality
        floyd: 1 // Controls level of dithering (0 = none, 1 = full).
      }),
      svgo({
          plugins: [
            'preset-default',
            'removeDimensions',
            { name:'removeViewBox', active: false },
            { name:'cleanupIDs', active: false }
          ]
      }),
    ], { verbose: true }))
    .pipe(flatten())
    .pipe(dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.graphics}`))
    .pipe(gulpif(CONFIG.webp, webp()))
    .pipe(gulpif(CONFIG.webp, dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.graphics}`)))
}

function fonts() {
  return src(CONFIG.files.src.fonts, { cwd: CONFIG.files.src.cwd })
    .pipe(flatten())
    .pipe(dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.fonts}`))
}

function media() {
  return src(CONFIG.files.src.media, { cwd: CONFIG.files.src.cwd })
    .pipe(flatten())
    .pipe(dest(`${CONFIG.files.dest.cwd}${CONFIG.files.dest.media}`))
}

function watchAll() {
  browserSync.init({
    proxy: CONFIG.url || null,
    server: CONFIG.baseDir ? {
      baseDir: CONFIG.baseDir,
    } : null,
    port: 9999,
    https: CONFIG.https,
  });

  styles();
  scripts();
  graphics();
  fonts();
  media();

  watch(`${CONFIG.files.src.cwd}/**/*.scss`, styles);
  watch(`${CONFIG.files.src.cwd}/**/*.js`, scripts);
  watch(`${CONFIG.files.src.cwd}/${CONFIG.files.src.graphics}`, graphics);
  watch(`${CONFIG.files.src.cwd}/${CONFIG.files.src.fonts}`, fonts);

  watch('**/*.{php,html}').on('change', () => browserSync.reload());
}

export default series(clean, watchAll);
export const build = series(clean, parallel(styles, scripts, graphics, fonts, media));