Issue #3109917 by sim_1, erutan: Upgrade to Foundation 6.7.4

{

  "presets": [ "@babel/preset-env" ],

  "compact": false

}

**Drush and Gulp**

The `gulpfile.js` includes drush commands that can be run every time scss/css

The `gulpfile.babel.js` includes drush commands that can be run every time scss/css

is updated. To use drush, edit the `config.js` file. In the `drush` option:

1. Set `enabled: false` to `enabled: true`

      css/STARTER.css: {}

  js:

    js/STARTER.js: { }

    js/foundation.min.js: {minified: true}

    js/foundation_init.js: {}

    js/motion-ui.min.js: {minified: true}

  dependencies:

    - core/drupal

    - core/jquery

    - core/jquery.once

# The URL of your server (e.g. http://localhost:49871 or foobar.lndo.site) for browersync

BROWSERSYNC: 'https://foobar.lndo.site'

# Gulp will reference these paths when it copies files

PATHS:

  # Path to built css folder

  dist: "css"

  # Path to main scss files and settings for subtheme

  scss: "scss/*.scss"

  # Path to subtheme scss files

  componentScss: "scss/**/*.scss"

  # Paths to Sass libraries, which can then be loaded with @import

  foundationScss:

    - "node_modules/foundation-sites/scss"

    - "node_modules/motion-ui/src"

  # Path to custom JS

  js:

    "js/*.js"

  # Paths to Foundation JavaScript for webpack to bundle modules

  foundationJs:

    - "node_modules/foundation-sites/dist/js/*.js"

    - "node_modules/motion-ui/dist/*.js"

// The Theme build process is based off of the Foundation Zurb

// Template: https://github.com/foundation/foundation-zurb-template

// Update the config.yml file with your STARTER URI, and any

// file paths that are different from the default.

import plugins       from 'gulp-load-plugins';

import yargs         from 'yargs';

import browser       from 'browser-sync';

import gulp          from 'gulp';

import rimraf        from 'rimraf';

import yaml          from 'js-yaml';

import fs            from 'fs';

import webpackStream from 'webpack-stream';

import webpack2      from 'webpack';

import named         from 'vinyl-named';

import autoprefixer  from 'autoprefixer';

import imagemin      from 'gulp-imagemin';

const sass = require('gulp-sass');

const postcss = require('gulp-postcss');

const sassLint = require('gulp-sass-lint');

// Load all Gulp plugins into one variable.

const $ = plugins();

// Check for --production flag.

const PRODUCTION = !!(yargs.argv.production);

// Load settings from config.yml.

function loadConfig() {

  const unsafe = require('js-yaml-js-types').all;

  const schema = yaml.DEFAULT_SCHEMA.extend(unsafe);

  const ymlFile = fs.readFileSync('config.yml', 'utf8');

  return yaml.load(ymlFile, {schema});

}

const { BROWSERSYNC, PATHS } = loadConfig();

// Build the compiled js and css by running all of the below tasks.

// Sass must be run later so UnCSS can search for used classes in the others assets.

gulp.task('build',

  gulp.series(clean, gulp.parallel(javascript, images), sassBuild, lintSass)

);

// Build the site, run the server, and watch for file changes.

gulp.task('default',

  gulp.series('build', server, watch)

);

// Delete the compiled js and css.

// This happens every time a build starts.

function clean(done) {

  rimraf(PATHS.dist, done);

}

// Compile Sass into CSS

// In production, the CSS is compressed

function sassBuild() {

  const postCssPlugins = [

    // Autoprefixer

    autoprefixer(),

  ].filter(Boolean);

  return gulp.src(PATHS.scss)

    .pipe($.sourcemaps.init())

    .pipe(sass({

      includePaths: PATHS.foundationScss

    })

      .on('error', $.sass.logError))

    .pipe(postcss(postCssPlugins))

    .pipe($.if(PRODUCTION, $.cleanCss({ compatibility: 'ie11' })))

    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))

    .pipe(gulp.dest(PATHS.dist))

    .pipe(browser.reload({ stream: true }));

}

function lintSass() {

  return gulp.src(PATHS.componentScss)

    .pipe(sassLint({

      config: 'sass-lint.yml'

    }))

    .pipe(sassLint.format());

}

let webpackConfig = {

  mode: (PRODUCTION ? 'production' : 'development'),

  externals: {

    jquery: 'jQuery'

  },

  module: {

    rules: [

      {

        test: /\.js$/,

        use: {

          loader: 'babel-loader',

          options: {

            presets: [ "@babel/preset-env" ],

            compact: false

          }

        }

      }

    ]

  },

  devtool: !PRODUCTION && 'source-map'

}

// Load/copy Foundation JavaScript

// In production, the file is minified

function javascript() {

  return gulp.src(PATHS.foundationJs)

    .pipe(named())

    .pipe($.sourcemaps.init())

    .pipe(webpackStream(webpackConfig, webpack2))

    .pipe($.if(PRODUCTION, $.terser()

      .on('error', e => { console.log(e); })

    ))

    .pipe($.if(!PRODUCTION, $.sourcemaps.write()))

    .pipe(gulp.dest('js/'));

}

// If using image optimization, copy them to image folder.

// In production, the images are compressed.

function images() {

  return gulp.src('images-source/**/*')

    .pipe($.if(PRODUCTION, imagemin([

      imagemin.gifsicle({interlaced: true}),

      imagemin.mozjpeg({quality: 85, progressive: true}),

      imagemin.optipng({optimizationLevel: 5}),

      imagemin.svgo({

        plugins: [

          {removeViewBox: true},

          {cleanupIDs: false}

        ]

      })

    ])))

    .pipe(gulp.dest('images/'));

}

// Start a server with BrowserSync to preview the site in

function server(done) {

  browser.init({

    proxy: {

      target: BROWSERSYNC

    },

  }, done);

}

// Reload the browser with BrowserSync

function reload(done) {

  browser.reload();

  done();

}

// Watch for changes to SCSS and JavaScript

function watch() {

  gulp.watch(PATHS.componentScss).on('all', sassBuild);

  gulp.watch(PATHS.js).on('all', gulp.series(browser.reload));

  gulp.watch('images-source').on('all', gulp.series(images, browser.reload));

}