Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Panini standalone setup #160

Open
sensaetions opened this issue Mar 6, 2018 · 8 comments
Open

Panini standalone setup #160

sensaetions opened this issue Mar 6, 2018 · 8 comments

Comments

@sensaetions
Copy link

sensaetions commented Mar 6, 2018

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
Copy link
Contributor

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

@sensaetions
Copy link
Author

sensaetions commented Mar 14, 2018

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

@sensaetions
Copy link
Author

@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
Copy link
Contributor

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

@sensaetions
Copy link
Author

@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
Copy link
Contributor

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
Copy link
Author

@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
Copy link

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..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants