Skip to content

Instantly share code, notes, and snippets.

@esteinborn

esteinborn/gulpfile.js

Last active February 19, 2019 21:41
Show Gist options
  • Save esteinborn/7fec61dca37a2875ce677a05cd5ef040 to your computer and use it in GitHub Desktop.
Save esteinborn/7fec61dca37a2875ce677a05cd5ef040 to your computer and use it in GitHub Desktop.
Download ZIP
Gulp 4 Gulpfile
Raw
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);
Raw
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"
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment