Add a sub-command to render partials.

This is supposed to contribute to
usebedrock#391.

core/cli/bedrock

@@ -18,5 +18,8 @@ program
 program
   .command('styleguide', 'Commands related to the styleguide content');
 
+program
+  .command('components', 'Commands related to the styleguide components');
+
 program
   .parse(process.argv);

core/cli/bedrock-components

@@ -0,0 +1,49 @@
+#! /usr/bin/env node
+
+'use strict';
+
+const program = require('commander');
+const glob = require('glob');
+const gulp = require('gulp');
+const path = require('path');
+
+const templates = require('../tasks/templates');
+const paths = require('../paths');
+
+
+program
+  .command('list')
+  .description('List the Pug templates under content/templates/_components')
+  .action(function () {
+    // glob.sync() is what gulp.src() uses, but the
+    console.log(glob.sync(paths.content.templates.allComponents, '**/*.pug'));
+  });
+
+program
+  .command('build')
+  .description('Build the component Pug templates')
+  .action(function () {
+    gulp.task('templates:compile:styleguide', templates.compile.styleguide);
+    gulp.series('templates:compile:styleguide')();
+  });
+
+program
+  .command('partials')
+  .description('Build the component Pug templates as partial HTML')
+  .action(function () {
+    gulp.task('templates:compile:partials', templates.compile.partials);
+    gulp.series('templates:compile:partials')();
+  });
+
+program
+  .action(() => {
+    program.help()
+  });
+
+if (process.argv.length === 2) {
+  program.help();
+  process.exit();
+}
+
+program
+  .parse(process.argv);

core/paths.js

@@ -108,6 +108,7 @@ module.exports = {
     },
     styleguide: path.join(distPath, config.styleguide.url),
     docs: path.join(distPath, config.styleguide.url+'/docs/'),
+    partials: path.join(distPath, 'styleguide/partials/'),
     assets: {
       images: path.join(distPath, 'images/'),
       fonts: path.join(distPath, 'fonts/'),

core/tasks/templates.js

@@ -32,6 +32,25 @@ 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);
+  });
+}
+
 module.exports = {
   clean(done) {
     del(['./dist/**.html', './dist/modules', './dist'+config.styleguide.url])
@@ -40,6 +59,28 @@ module.exports = {
       });
   },
   compile: {
+    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', function (err) {
+          notifier.notify({
+            title: 'Pug error',
+            message: err.message
+          });
+          gutil.log(gutil.colors.red(err));
+          gutil.beep();
+          this.emit('end');
+        })
+        .pipe(prettify(config.prettify))
+        .pipe(gulp.dest(paths.dist.partials));
+    },
     styleguide(done) {
       const defaultLocals = getDefaultLocals();