gulpfile.1.babel.js

// with browsersync

'use strict';

const gulp = require('gulp');
const browserSync = require('browser-sync').create();
const sass = require('gulp-sass');
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');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
const del = require('del');
const concat = require('gulp-concat');
const path = require('path');
const purgecss = require('gulp-purgecss');
const rename = require('gulp-rename');
const twig = require('gulp-twig');
const data = require('gulp-data');
const fs = require('fs');
const prettier = require('gulp-prettier');

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

/**
 * Clean dist folder
 */
const clean = () => {
  return del([CONFIG.dist]);
};

/**
 * Reload browser
 */
const reload = cb => {
  browserSync.reload();
  cb();
};

/**
 * Build css files
 * SCSS config - ./gulp/tasks/sass.js
 */
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}.css`))
      .pipe(gulp.dest(config.buildLocations.css));
  });

  return merge(tasks);
};

/**
 * Purge all unused css
 * CSS config - ./gulp/tasks/css.js
 */
const purgestyles = () => {
  let tasks = CSS_CONFIGS.map(config => {
    return gulp
      .src(config.src)
      .pipe(
        purgecss({
          content: config.content,
          css: config.src,
          whitelist: ['show', 'loading', 'active'],
        }),
      )
      .pipe(rename(`${config.css}`))
      .pipe(gulp.dest(`${config.dist}`));
  });

  return merge(tasks);
};

/**
 * Run webpack to build assets as specified in webpack config
 */
const scripts = () => {
  const webpackConfig = getWebpackConfig();
  return new Promise((resolve, reject) => {
    webpack(webpackConfig, (err, stats) => {
      if (err) {
        return reject(err);
      }

      if (stats.hasErrors()) {
        return reject(new Error(stats.compilation.errors.join('\n')));
      }

      resolve();
    });
  });
};

/**
 * Copy the assets over
 */
const copy = () => {
  return gulp.src(`${CONFIG.assets}/**/*`).pipe(gulp.dest(`${CONFIG.dist}/page`));
};

/**
 * Update & copy HTML files
 */
const compile = () => {
  return gulp
    .src(`${CONFIG.twig}/*.twig`)
    .pipe(
      plumber({
        handleError: err => {
          console.log(err);
        },
      }),
    )
    .pipe(
      data(file => {
        const content = JSON.parse(fs.readFileSync(`${CONFIG.data}/${path.basename(file.path)}.json`));
        const header = JSON.parse(fs.readFileSync(`${CONFIG.data}/header.twig.json`));
        const footer = JSON.parse(fs.readFileSync(`${CONFIG.data}/footer.twig.json`));

        const pageData = {
          ...content,
          header,
          footer,
        };

        return pageData;
      }),
    )
    .pipe(
      twig().on('error', err => {
        process.stderr.write(`${err.message}\n`);
      }),
    )
    .pipe(gulp.dest(CONFIG.dist));
};

/**
 * Format HTML files
 */
const format = () => {
  return gulp.src(`${CONFIG.dist}/*.html`).pipe(prettier()).pipe(gulp.dest(CONFIG.dist));
};

/**
 * Watch all scss, html and images
 */
const watch = () => {
  gulp.watch(`${CONFIG.js}/**/*`, gulp.series(scripts, reload));
  gulp.watch(`${CONFIG.scss}/**/*`, gulp.series(styles, purgestyles, reload));
  gulp.watch(`${CONFIG.twig}/**/*`, gulp.series(compile, styles, purgestyles, reload));
  gulp.watch(`${CONFIG.assets}/**/*`, gulp.series(copy, reload));
};

/**
 * Run dev server
 */
const serve = () => {
  browserSync.init({
    server: {
      baseDir: CONFIG.dist,
    },
  });
};

/**
 * Create the webpackConfig object based on files in JS config
 * JS config - ./gulp/tasks/scripts.js
 */
function getWebpackConfig() {
  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,
    module: {
      rules: [{ test: /\.js$/, loader: 'babel-loader' }],
    },
    output: {
      filename: '[name].js',
      path: path.resolve(__dirname, `${CONFIG.assetsDist}/wrappers/colgate-optimism-2020/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 webpackConfig;
}

gulp.task('clean', clean);
gulp.task('default', gulp.series(clean, compile, format, copy, styles, purgestyles, scripts));
gulp.task('dev', gulp.series('default', serve));
gulp.task('watch', gulp.parallel('dev', watch));