gulpfile.js

'use strict';

/**
 * gulpfile.js requirements
 */

// Scaffold requirements
const gulp = require('gulp'), // This taskrunner,
      { resolve } = require("path");

// CSS requirements
const sass = require('gulp-sass')(require('sass')), // Dart Sass via gulp-sass 5+
      sassGlob = require('gulp-sass-glob'), // Allows the import of patterns through '/**/*.scss' See https://yarnpkg.com/package/gulp-sass-glob
      postcss = require('gulp-postcss'), // PostCSS processor https://github.com/postcss/postcss
      scss = require("postcss-scss"),
      browserSync = require('browser-sync').create(), // Create BrowserSync instance See https://www.browsersync.io/docs/gulp
      autoprefixer = require('autoprefixer'), // Automatically add vendor rules https://github.com/postcss/autoprefixer
      cssnano = require('cssnano'), // Minify CSS stylsheets https://cssnano.co/
      sourcemaps = require('gulp-sourcemaps'); // Enables sourcemap generation https://yarnpkg.com/package/gulp-sourcemaps

// Stylelint is run as a separate CLI step (see the "lint" npm script) rather
// than as a PostCSS plugin, because stylelint 15+ is ESM-only and no longer
// ships a PostCSS plugin interface.

// JS requirements
// to be added...

/**
 *
 * Base Utilities start
 * Here we set up some configuration and functions that we may reuse
 *
 */

// Resolve our source sass folder dynamically
const sourceSassFolder = resolve('./assets/scss/');

// Bootstrap 4 and gulp-sass still rely on deprecated Sass APIs/features.
// Suppress known dependency noise until Bootstrap is upgraded.
const sassOptions = {
  quietDeps: true,
  silenceDeprecations: [
    'legacy-js-api',
    'import',
    'global-builtin',
    'slash-div',
    'color-functions',
    'mixed-decls',
  ],
};

/**
 * PostCSS plugins and configuration mapped to gulpconfig.js
 */
const postcssPluginsPostSass = [
  autoprefixer(),
  cssnano({ // CSS Nano should always run last
    preset: ['default', {
      discardComments: {
        removeAll: true,
      },
      reduceTransforms: false,
    }]
  })
];

/**
 *
 * Functions start
 *
 */

/**
 * Start browserync with gulpconfig.js configuration
 */
function browserSyncStart() {
  browserSync.init({
    proxy: 'appserver',
    open: false
  });
}

/**
 * Generates the drupal stylesheet from patterns
 */
function generateStyle() {
  return (
    gulp
      .src('./assets/scss/**/*.scss', { base: './assets/scss' })
      .pipe(sourcemaps.init())
      .pipe(sassGlob())
      .pipe(sass(sassOptions))
      .on('error', sass.logError)
      .pipe(postcss(postcssPluginsPostSass, {syntax: scss})) // Run postCSS after SASS
      .pipe(sourcemaps.mapSources(function(sourcePath, file) {
        return sourceSassFolder + '/' + sourcePath;
      }))
      .pipe(sourcemaps.write('.'))
      .pipe(gulp.dest('assets/css/'))
  );
}

/**
 * Watches SASS files in source/components and re-compiles them on change
 */
function watchStyle() {
  return (
    gulp
      .watch('./assets/scss/**/*.scss')
      .on('change', generateStyle)
  );
}

/**
 * Serve files by streaming them into browserSync
 */
function serve() {
  return (
    gulp
      .watch(['./assets/js/*.js', './assets/css/*.css', './**/*.twig'])
      .on('change', browserSync.reload)
  );
}
/**
 * Functions end
 */





/**
 * Gulp tasks exports start
 */

/** Default development task */
const dev = gulp.series(
  generateStyle,
  gulp.parallel(browserSyncStart, watchStyle, serve)
);

/** Generates style without any listeners or browserSync */
const generate = gulp.series(
  generateStyle,
);

// Expose the task by exporting it, this allows you to run it from the commandline
exports.dev = dev;
exports.generate = generate;


/*
* Gulp tasks exports end
*/