Gulp 4 Gulpfile

gulpfile.js

/* global require exports */
/* eslint-env node */
/* eslint no-console: 0 */
/* eslint max-len: 0 */
/* eslint prefer-destructuring: 0 */

const {
  watch,
  series,
  src,
  lastRun,
  parallel,
  dest,
} = require('gulp');
const Fiber = require('fibers');
const sass = require('gulp-sass');
const sassLint = require('gulp-sass-lint');
const eslint = require('gulp-eslint');
const livereload = require('gulp-livereload');
const replace = require('gulp-replace');
const rename = require('gulp-rename');
const exec = require('child_process').exec;

// Styleguide Vars
const del = require('del');
const kss = require('kss');
// const importOnce = require('node-sass-import-once');

const drupalTheme = 'docroot/themes/custom/oagnetbootstrap/';
const configFolder = 'config/default/';

const paths = {
  styles: {
    src: [
      `${drupalTheme}scss/**/*.scss`,
      `!${drupalTheme}scss/component/**/*.scss`,
      `!${drupalTheme}scss/jquery-ui/**/*.scss`,
      `!${drupalTheme}scss/_overrides.scss`,
    ],
    dest: `${drupalTheme}css`,
  },
  twig: {
    src: `${drupalTheme}**/**/*.twig`,
  },
  themejs: {
    src: `${drupalTheme}js/**/*.js`,
  },
  gulpjs: {
    src: [
      'gulpfile.js',
    ],
  },
};

const options = {};

options.rootPath = {
  project: `${__dirname}/`,
  styleGuide: `${__dirname}/docroot/styleguide/`,
};

options.theme = {
  name: 'OAGnetbootstrap',
  root: `${drupalTheme}`,
  components: `${drupalTheme}scss/`,
  build: `${drupalTheme}scss/style-guide/`,
  css: `${__dirname}/docroot/styleguide/css/`,
};

options.sass = {
  includePaths: [
    options.theme.components,
    `${options.rootPath.project}node_modules/chroma-scss/sass`,
  ],
  outputStyle: 'expanded',
};

options.styleGuide = {
  source: options.theme.components,
  mask: /\.less|\.sass|\.scss|\.styl|\.stylus/,
  destination: options.rootPath.styleGuide,
  builder: 'builder/twig',
  'extend-drupal8': true,
  namespace: `${options.theme.name}:${options.theme.components}`,
  css: [
    'css/style-guide/chroma-kss-styles.css',
    'css/style-guide/kss-only.css',
    'css/style.css',
  ],
  js: [
  ],
  homepage: 'homepage.md',
  title: 'Design System Library',
};

sass.compiler = require('sass');

function sassCompiler() {
  return src(paths.styles.src, { sourcemaps: true, since: lastRun(sassCompiler) })
    .pipe(sass({ fiber: Fiber, outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(dest(paths.styles.dest, { sourcemaps: '.' }));
}

function sassCompilerLR() {
  return src(paths.styles.src, { sourcemaps: true, since: lastRun(sassCompiler) })
    .pipe(sass({ fiber: Fiber, outputStyle: 'expanded' }).on('error', sass.logError))
    .pipe(dest(paths.styles.dest, { sourcemaps: '.' }))
    .pipe(livereload({ start: true }));
}

function sassLinter() {
  return src(paths.styles.src, { since: lastRun(sassLinter) })
    .pipe(sassLint({
      configFile: `${configFolder}.sass-lint.yml`,
    }))
    .pipe(sassLint.format())
    .pipe(sassLint.failOnError());
}

function themeESLinter() {
  return src(paths.themejs.src, { since: lastRun(themeESLinter) })
    .pipe(eslint({
      useEslintrc: false, // set this to false to stop searching for other .eslintrc files
      configFile: `${configFolder}.eslintrc`,
    }))
    .pipe(eslint.format())
    .pipe(eslint.results((results) => {
      if (results.warningCount > 0) {
        console.log(`Total Warnings: ${results.warningCount}`);
      }
      if (results.errorCount > 0) {
        console.log(`Total Errors: ${results.errorCount}`);
      }
    }))
    .pipe(eslint.failAfterError());
}

function gulpESLinter() {
  return src(paths.gulpjs.src)
    .pipe(eslint({
      useEslintrc: false, // set this to false to stop searching for other .eslintrc files
      configFile: '.es6lintrc',
    }))
    .pipe(eslint.format())
    .pipe(eslint.results((results) => {
      if (results.warningCount > 0) {
        console.log(`Total Warnings: ${results.warningCount}`);
      }
      if (results.errorCount > 0) {
        console.log(`Total Errors: ${results.errorCount}`);
      }
    }))
    .pipe(eslint.failAfterError());
}

function fullCacheRebuild() {
  console.log('TWIG file added or deleted, Clearing All Cache!');
  return exec('cd ~/drupal/prime/docroot && fin drush cr all', () => {
    exec('osascript -e \'display notification "Cache Rebuild Complete" with title "Prime" sound name "Blow"\'');
    console.log('Drupal Cache Cleared!');
  });
}

function renderCacheRebuild() {
  console.log('TWIG file modified, Clearing Render Cache!');
  return exec('cd ~/drupal/prime/docroot && fin drush cc render', () => {
    exec('osascript -e \'display notification "Cache Rebuild Complete" with title "Prime" sound name "Blow"\'');
    console.log('Drupal Cache Cleared!');
  });
}

function styleguideClean() {
  return del([
    options.styleGuide.destination,
  ], { force: true });
}

function styleguideChroma() {
  return src(`${options.theme.components}style-guide/kss-example-chroma.scss`)
    .pipe(sass(options.sass).on('error', sass.logError))
    .pipe(replace(/(\/\*|\*\/)\n/g, ''))
    .pipe(rename('kss-example-chroma.twig'))
    .pipe(dest(`${options.theme.build}twig`));
}

function styleguideSass() {
  return src(`${drupalTheme}scss/**/*.scss`)
    .pipe(sass({ outputStyle: 'expanded' }))
    .pipe(dest(options.theme.css));
}

function styleguideFonts() {
  return src([
    `${drupalTheme}bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.woff2`,
    `${drupalTheme}bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.woff`,
    `${drupalTheme}bootstrap/assets/fonts/bootstrap/glyphicons-halflings-regular.ttf`,
  ])
    .pipe(dest(`${__dirname}/docroot/styleguide/bootstrap/assets/fonts/bootstrap/`));
}

function styleguideBuild() {
  return kss(options.styleGuide);
}

function watcher() {
  watch(paths.themejs.src, themeESLinter);
  watch(paths.gulpjs.src, gulpESLinter);
  watch(paths.styles.src, series(sassLinter, sassCompilerLR));
  watch(paths.twig.src, { events: ['add', 'unlink'] }, fullCacheRebuild);
  watch(paths.twig.src, { events: 'change' }, renderCacheRebuild);
}

exports.watcher = watcher;
exports.styleguide = series(styleguideClean, parallel(styleguideChroma, styleguideSass, styleguideFonts), styleguideBuild);
exports.build = series(parallel(themeESLinter, gulpESLinter, sassLinter), sassCompiler);
exports.default = series(parallel(themeESLinter, gulpESLinter, sassLinter), sassCompilerLR, watcher);

package.json

{
  "name": "oagnetbootstrap-styleheet",
  "author": "Eric Steinborn",
  "description": "The node.js requirements to build the CSS and the KSS project.",
  "version": "1.0.0",
  "license": "MIT",
  "repository": {},
  "devDependencies": {
    "chroma-sass": "^1.2.6",
    "del": "^3.0.0",
    "eslint": "^5.3.0",
    "eslint-config-airbnb-base": "^13.1.0",
    "eslint-plugin-import": "^2.16.0",
    "fibers": "^3.1.1",
    "gulp": "^4.0.0",
    "gulp-eslint": "^5.0.0",
    "gulp-livereload": "^4.0.1",
    "gulp-rename": "^1.4.0",
    "gulp-replace": "^1.0.0",
    "gulp-sass": "^4.0.2",
    "gulp-sass-lint": "^1.4.0",
    "kss": "3.0.0-beta.19",
    "sass": "^1.17.0"
  }
}