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. Usesp2-theme-core
for automation.p2-theme-core
(this repo) - the core gulp tasks that handles most of the theme's automation.
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!
- 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.
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)
));