diff --git a/core/paths.js b/core/paths.js index b74f7d3..6c6e27b 100644 --- a/core/paths.js +++ b/core/paths.js @@ -99,6 +99,7 @@ module.exports = { mainPath: path.join(distPath, 'css/'), allFiles: path.join(distPath, 'css/**/*.css'), }, + partials: path.join(distPath, 'partials/'), styleguide: path.join(distPath, 'styleguide/'), docs: path.join(distPath, 'styleguide/docs/'), assets: { diff --git a/core/tasks/templates.js b/core/tasks/templates.js index 4f2f107..c0df419 100644 --- a/core/tasks/templates.js +++ b/core/tasks/templates.js @@ -26,6 +26,35 @@ function getDefaultLocals() { return defaultLocals; } +/* Add the user-defined _mixins/all and the Bedrock-provided icons mixins. + * This is done using the sample.pug wrapper template, also used to render + * the components in the style guide (using the `renderCode` function). + */ +function addMixins() { + return through.obj(function (vinylFile, encoding, callback) { + var outFile = vinylFile.clone(); + + const indentedPugMarkup = + vinylFile.contents.toString().split('\n').map(line => ` ${line}`).join('\n'); + const markupWithLayout = + `extends /../core/templates/layouts/sample\n\nblock content\n${indentedPugMarkup}`; + + outFile.contents = new Buffer.from(markupWithLayout); + + callback(null, outFile); + }); +} + +function handleError(err) { + notifier.notify({ + title: 'Pug error', + message: err.message + }); + gutil.log(gutil.colors.red(err)); + gutil.beep(); + this.emit('end'); +} + module.exports = { clean(done) { del(['./dist/**.html', './dist/modules', './dist/styleguide']).then(function () { @@ -113,17 +142,23 @@ module.exports = { }); })) .pipe(gulpPug(config.pug)) - .on('error', function (err) { - notifier.notify({ - title: 'Pug error', - message: err.message - }); - gutil.log(gutil.colors.red(err)); - gutil.beep(); - this.emit('end'); - }) + .on('error', handleError) .pipe(prettify(config.prettify)) .pipe(gulp.dest(paths.dist.path)); + }, + partials(done) { + return gulp.src(paths.content.templates.allComponents) + .pipe(data(function (file) { + return Object.assign({}, getDefaultLocals(), { + filename: path.basename(file.path).replace('pug', 'html'), + pathname: file.path.replace(path.join(process.cwd(), paths.content.templates.path), '').replace('.pug', ''), + }); + })) + .pipe(addMixins()) + .pipe(gulpPug(config.pug)) + .on('error', handleError) + .pipe(prettify(config.prettify)) + .pipe(gulp.dest(paths.dist.partials)); } } }; diff --git a/gulpfile.js b/gulpfile.js index 59f594d..93ea062 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -43,12 +43,18 @@ gulp.task('bundle:prototypeBundle', bundle.prototypeBundle); gulp.task('icon-font', iconFont); gulp.task('templates:compile:content', templates.compile.content); +gulp.task('templates:compile:partials', templates.compile.partials); gulp.task('templates:compile:styleguide', templates.compile.styleguide); gulp.task('templates:compile:docs', templates.compile.docs); -gulp.task('templates:compile', config.styleguide ? - gulp.parallel('templates:compile:content', 'templates:compile:styleguide', 'templates:compile:docs') : - gulp.series('templates:compile:content') +gulp.task( + 'templates:compile', + config.styleguide ? + gulp.parallel( + 'templates:compile:content', 'templates:compile:partials', + 'templates:compile:styleguide', 'templates:compile:docs') : + gulp.parallel( + 'templates:compile:content', 'templates:compile:partials') ); gulp.task('watch', watch);