Add a sub-command to render partials.

This is supposed to contribute to
usebedrock#391.

core/cli/bedrock

@@ -15,5 +15,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

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

core/tasks/templates.js

@@ -32,13 +32,54 @@ 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/styleguide']).then(function () {
       done();
     });
   },
   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();
 

package.json

@@ -86,6 +86,7 @@
     "vinyl-source-stream": "^2.0.0"
   },
   "dependencies": {
-    "commander": "^2.20.3"
+    "commander": "^2.20.3",
+    "through2": "^4.0.2"
   }
 }