foundation / foundation/panini

Panini standalone setup

Open
#160 8 comments 0 reactions 0 assignees View on GitHub
Dominant language
JavaScript
Stars
593
Forks
104
PR merge metrics
No merged PRs in 30d

Description

Hello,
I'm interested in using the standalone panini in my project. However, I'm struggling to get it to work and recognize my partials. I've set up my Panini gulp task as so:
```
// fix for autoprefixer
require('es6-promise').polyfill();

// Plugins
var browserSync = require('browser-sync'),
connectPhp = require('gulp-connect-php'),
concat = require('gulp-concat'),
copy = require('gulp-copy'),
del = require('del'),
gls = require('gulp-live-server'),
gulp = require('gulp'),
gutil = require('gulp-util'),
imagemin = require('gulp-imagemin'),
notify = require('gulp-notify'),
panini = require('panini'),
plumber = require('gulp-plumber'),
rename = require('gulp-rename'),
svgmin = require('gulp-svgmin'),
svgsymbols = require('gulp-svg-symbols'),
reload = browserSync.reload,
watch = require('gulp-watch');

var filesPages = ['src/pages/*.html'];

var filesPartials = ['src/{layouts,pages,partials}/**/*.html'];

var filesCss = ['src/assets/css/**/*.css'];

var filesImages = ['src/assets/images/*.{jpg,png,gif,webp}'];

var filesFonts = ['src/assets/fonts/**/*.{eot,svg,ttf,woff,woff2}'];

var filesSvg = [
'src/assets/svg/**/*.svg',
'!src/assets/svg/**/svg-symbols.{svg,css}'
];

var filesCopy = [
'src/pages/*.html',
'src/assets/css/*.css',
'src/assets/svg/svg-symbols.{css,svg}',
'src/assets/images/**/.{gif,jpg,png,webp}',
'src/assets/fonts/**/*.{eot,svg,ttf,woff,woff2}'
];

var dirDist = ['dist'];

// BEGIN TASKS
gulp.task('pages', function() {
return gulp.src(filesPages)
.pipe(panini({
root: 'src/pages/',
layouts: 'src/layouts/',
partials: 'src/partials/',
helpers: 'src/src/helpers/',
data: 'src/data/'
}))
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(gulp.dest(dirDist))
.pipe(reload({
stream: true
}));
});

gulp.task('images', function() {
return gulp.src(filesImages)
.pipe(imagemin())
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(gulp.dest(dirDist + '/assets/images'))
.pipe(reload({
stream: true
}));
});

gulp.task('svgsprite', function() {
return gulp.src(filesSvg)
.pipe(svgmin())
.pipe(svgsymbols({
templates: ['default-svg', 'default-css']
}))
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(gulp.dest(dirDist + '/assets/svg'))
.pipe(reload({
stream: true
}));
});

gulp.task('copy', function() {
return gulp.src(filesCopy)
.pipe(plumber({errorHandler: notify.onError('Error: <%= error.message %>')}))
.pipe(gulp.dest(dirDist))
.pipe(reload({
stream: true
}));
});

gulp.task('connectSync', function() {
connectPhp.server({}, function (){
browserSync({
proxy: 'localhost:8000',
base: 'dist',
open: {
browser: 'Google Chrome'
}
});
});
});

gulp.task('watch', function() {
gulp.watch(filesPartials, 'pages');
gulp.watch(filesImages, 'images');
gulp.watch(filesSvg, 'svgsprite');
});

// Tasks
gulp.task('default', gulp.series(gulp.parallel('pages', 'images', 'svgsprite'), 'copy', 'connectSync', 'watch'));

```
But when I go to include my partials `{{> file-name}}`, panini only outputs that exactly (not the contents of that file). Can anyone help clarify where I went wrong and how to fix it?

Contributor guide

No contributing guide indexed for this repository

Research direction

Start with the gulp `pages` task and Panini's configured root, layouts, partials, helpers, and data paths; compare them with the project tree and how `{{> file-name}}` is resolved. Run the pages task and inspect the generated page. Done means the partial's contents appear in the output instead of the literal expression.

Written by the indexing model from the issue text.

Assessment

Tech stack
handlebars, javascript
Domain
build-system, tooling
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.