p2-theme-core

Prerequisites

• p2-theme-core v9: Node >=4.0.0 >=8.0.0
• p2-theme-core v10: Node >=6.0.0 <=8.0.0

This is one of two pieces of our themes:

• pattern-lab-starter - a starter set of files for Drupal theming that includes a Twig powered Pattern Lab and beginning Sass & other front end tools. Uses p2-theme-core for automation.
• p2-theme-core (this repo) - the core gulp tasks that handles most of the theme's automation.

Phase2 Theme Core

Ideally, the changes to how a theme install works would be done by passing in a different config.js.

More docs in docs/ folder – these docs are hosted in Read the Docs!

Features

• Scss => CSS compiling with Libsass, PostCSS, linting, and SourceMaps
• Pattern Lab Twig compiling & BrowserSync live reload and style injection
• SVG => Font Icons compiling with support for adding mixins and classes to Scss along with a demo page in Pattern Lab
• JS compiling via Babel, linting and aggregation
• WebPack module bundling
• Drupal file watching to trigger Drush cache clears

All is easily configurable by changing values in your config.js file in your project. These values are merged into the config.default.js file - look there for the available options and defaults.

Installation

It's best to look at how pattern-lab-starter implements this, but it's basically this:

npm install p2-theme-core --save
cp node_modules/p2-theme-core/config.default.js gulpconfig.js

Make a gulpfile.js with:

'use strict';
var gulp = require('gulp');
var config = require('./gulpconfig.js');
var tasks = {
  'compile': [],
  'watch': [],
  'validate': [],
  'clean': [],
  'default': []
};

require('p2-theme-core')(gulp, config, tasks);

gulp.task('clean', gulp.parallel(tasks.clean));
gulp.task('compile', gulp.series(
  'clean',
  gulp.parallel(tasks.compile)
));
gulp.task('validate', gulp.parallel(tasks.validate));
gulp.task('watch', gulp.parallel(tasks.watch));
tasks.default.push('watch');
gulp.task('default', gulp.series(
  'compile',
  gulp.parallel(tasks.default)
));