Panini standalone setup

[sensaetions]

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?

[gakimball]

Where are you writing {{> file-name}}? Usually you'd get a Handlebars error if it can't find the partial.

[sensaetions]

I’m importing the handlebars partials into default.html layout and pages, but not getting any errors either.

[sensaetions]

@gakimball, Can you or someone provide a simple project, with a sample gulp file and file structure so that I can see how a project is set up to use panini and get it working? Thank you in advance.

[gakimball]

Assuming you're using v1 of Panini, the ZURB Template has got your back: https://github.com/zurb/foundation-zurb-template

[sensaetions]

@gakimball Thanks for suggesting the Foundation Zurb template as a sample. I have used the Foundation Zurb template, but I would prefer something much leaner with just the Panini parts, and without the Foundation framework. Do you have any lean samples?

How many versions of Panini are there, if you're asking if I'm using v1?

[gakimball]

Looking at your code sample closer, I've realized there's something critical you've missed.

There's a function called panini.refresh() that loads all the templates, partials, helpers, data, etc. into the system before the pages are compiled. This exists so that those things don't happen every time the main Gulp task is re-run.

However, it's an annoying API because it's not super obvious. In a future version of Panini I'm getting rid of it and making that process automatic.

If you look at the Gulpfile for the ZURB template, there's a task here that calls panini.refresh().

There's also a gulp.watch call to reference this task here.

Add this into your Gulpfile and let me know if that fixes things. :)

How many versions of Panini are there, if you're asking if I'm using v1?

v1 is the only stable one. I've been making a v2 in my spare time over the last year. It's nearly there, but I don't have a lot of time to work on it these days. I'd recommend sticking with v1 for now. Migrating to v2 will be pretty straightforward, since all the core concepts of Panini are the same.

[sensaetions]

@gakimball Thank you for the code samples; I'll take a look and see if I can adapt it into my gulpfile. I'll let you know what the results are.

[adjieindrawan]

Looking at your code sample closer, I've realized there's something critical you've missed.

There's a function called panini.refresh() that loads all the templates, partials, helpers, data, etc. into the system before the pages are compiled. This exists so that those things don't happen every time the main Gulp task is re-run.

However, it's an annoying API because it's not super obvious. In a future version of Panini I'm getting rid of it and making that process automatic.

If you look at the Gulpfile for the ZURB template, there's a task here that calls panini.refresh().

There's also a gulp.watch call to reference this task here.

Add this into your Gulpfile and let me know if that fixes things. :)

How many versions of Panini are there, if you're asking if I'm using v1?

v1 is the only stable one. I've been making a v2 in my spare time over the last year. It's nearly there, but I don't have a lot of time to work on it these days. I'd recommend sticking with v1 for now. Migrating to v2 will be pretty straightforward, since all the core concepts of Panini are the same.

Thanks, i follow gulpfile.babel. Works for me..