diff --git a/core/discovery/default-config.js b/core/discovery/default-config.js index 85c0824..9174cc9 100644 --- a/core/discovery/default-config.js +++ b/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; \ No newline at end of file +module.exports = defaultConfig; diff --git a/core/paths.js b/core/paths.js index 0eb6152..23bb799 100644 --- a/core/paths.js +++ b/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: { diff --git a/core/tasks/templates.js b/core/tasks/templates.js index 4f2f107..3a39b62 100644 --- a/core/tasks/templates.js +++ b/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)); } } }; diff --git a/gulpfile.js b/gulpfile.js index 59f594d..6b12f37 100644 --- a/gulpfile.js +++ b/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'));