Render the components as partials.

core/discovery/default-config.js

@@ -10,6 +10,11 @@ const defaultConfig = {
   pageTree: {
     layoutStyle: 'sidebar'
   },
+  /**
+   *  Partials generation: this flag determines
+   *  whether the components partials get generated
+   */
+  partials: false,
   /**
    * CSS and JS minification
    * Adjust these values to set up your project for production or dev
@@ -86,4 +91,4 @@ const defaultConfig = {
   },
 };
 
-module.exports = defaultConfig;
+module.exports = defaultConfig;

core/paths.js

@@ -100,6 +100,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: {

core/tasks/templates.js

@@ -26,9 +26,38 @@ 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 () {
+    del(['./dist/**.html', './dist/modules', './dist/partials', './dist/styleguide']).then(function () {
       done();
     });
   },
@@ -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));
     }
   }
 };

gulpfile.js

@@ -43,13 +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')
-);
+var compileTasks = ['templates:compile:content'];
+if (config.partials) {
+  compileTasks.push('templates:compile:partials');
+}
+if (config.styleguide) {
+  compileTasks.push('templates:compile:styleguide', 'templates:compile:docs');
+}
+gulp.task('templates:compile', gulp.parallel(...compileTasks));
 
 gulp.task('watch', watch);
 gulp.task('copy', gulp.parallel('copy:images', 'copy:fonts', 'copy:resources', 'copy:scripts', 'copy:favicon'));