gulpfile.2.babel.js

'use strict';

const gulp = require('gulp');
const sass = require('gulp-sass');
const purgecss = require('gulp-purgecss');
const rename = require('gulp-rename');
const merge = require('merge-stream');
const plumber = require('gulp-plumber');
const autoprefixer = require('gulp-autoprefixer');
const sourcemaps = require('gulp-sourcemaps');
const gulpif = require('gulp-if');
const webpack = require('webpack-stream');
const imagemin = require('gulp-imagemin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const del = require('del');
const concat = require('gulp-concat');

const CONFIG = require('./gulp/config');
const SASS_CONFIGS = require('./gulp/tasks/sass');
const CSS_CONFIGS = require('./gulp/tasks/css');
const SCRIPTS_CONFIGS = require('./gulp/tasks/scripts');
const taskOptions = CONFIG.getConfigKeys();
const json = require('gulp-json-concat');

const clean = () => {
  return del(['./dist']);
};

const cleanImages = () => {
  return del(['./dist/images']);
};

const cleanACF = () => {
  return del(['./dist/*.json']);
};

const acf = () => {
  return gulp
    .src('./acf-json/*.json')
    .pipe(
      json('acf.json', function (data) {
        return new Buffer(JSON.stringify(data));
      })
    )
    .pipe(gulp.dest('./dist'));
};

const styles = () => {
  let tasks = SASS_CONFIGS.map((config) => {
    return gulp
      .src(config.sass.src)
      .pipe(gulpif(taskOptions.sourcemaps, sourcemaps.init()))
      .pipe(
        taskOptions.minify
          ? sass({
              outputStyle: 'compressed',
              includePaths: [
                'node_modules/',
                'node_modules/bootstrap/scss/',
              ],
            })
          : sass({
              includePaths: [
                'node_modules/',
                'node_modules/bootstrap/scss/',
              ],
            })
      )
      .pipe(
        plumber({ errorHandler: (error) => console.log(error) })
      )
      .pipe(autoprefixer('last 2 versions'))
      .pipe(gulpif(taskOptions.sourcemaps, sourcemaps.write()))
      .pipe(concat(`${config.app.baseName}.build.css`))
      .pipe(gulp.dest(config.buildLocations.css));
  });

  return merge(tasks);
};

const purgestyles = () => {
  let tasks = CSS_CONFIGS.map((config) => {
    // const content = ['header.php'];
    // Array.prototype.push.apply(config.content, content);
    return gulp
      .src(config.src)
      .pipe(
        purgecss({
          content: config.content,
          css: config.src,
          whitelist: CONFIG.wordpressPurgeCSS.whitelist,
          whitelistPatterns:
            CONFIG.wordpressPurgeCSS.whitelistPatterns,
        })
      )
      .pipe(rename(`${config.css}`))
      .pipe(gulp.dest(CONFIG.purgeCSSdest));
  });

  return merge(tasks);
};

const scripts = () => {
  let entries = {};
  for (let i = 0; i < SCRIPTS_CONFIGS.length; i++) {
    const config = SCRIPTS_CONFIGS[i];
    entries[config.app.baseName] = config.js.entry;
  }

  const mode =
    CONFIG.environment === 'production'
      ? 'production'
      : 'development';
  const webpackConfig = {
    mode: mode,
    entry: entries,
    watch: taskOptions.watch,
    module: {
      rules: [{ test: /\.js$/, loader: 'babel-loader' }],
    },
    output: {
      filename: '[name].js',
    },
    externals: {
      jquery: 'jQuery',
    },
    plugins: [],
  };

  if (taskOptions.sourcemaps) {
    webpackConfig.devtool = 'source-map';
  }

  if (taskOptions.minify) {
    webpackConfig.plugins.push(
      new UglifyJsPlugin({
        uglifyOptions: {
          output: {
            comments: false,
          },
        },
      })
    );
  }

  return gulp
    .src('./src/scripts/src/**')
    .pipe(webpack(webpackConfig))
    .pipe(plumber({ errorHandler: (error) => console.log(error) }))
    .pipe(gulp.dest('./dist/js'));
};

const images = () => {
  return gulp
    .src('./src/images/**/*')
    .pipe(imagemin())
    .pipe(gulp.dest('./dist/images'));
};

const watch = () => {
  gulp.watch('./src/scss/**/*', gulp.series(styles, purgestyles));
  gulp.watch('./src/images/**', gulp.series(cleanImages, images));
};

gulp.task('acf', gulp.series(cleanACF, acf));
gulp.task(
  'default',
  gulp.series(clean, styles, images, purgestyles, scripts)
);
gulp.task(
  'local',
  gulp.series(clean, acf, styles, purgestyles, images, scripts)
);
gulp.task('watch', gulp.parallel('default', acf, watch));