panini

Panini

Un générateur de fichiers plat super simple à utiliser avec Gulp. Il compile une série de pages HTML en utilisant une disposition commune. Ces pages peuvent également inclure des partiels HTML, des aides à guidon externes ou des données externes sous forme de JSON ou YAML.

Panini n'est pas un générateur de sites statiques à part entière - il résout plutôt le problème très spécifique de l'assemblage de fichiers plats à partir d'éléments communs, en utilisant une langue de modèles.

Installation

npm install panini --save-dev

Usage

Nourrissez Panini un flux de fichiers HTML et obtenez un délicieux site aplati à l'autre extrémité.

 var gulp = require ( 'gulp' ) ;
var panini = require ( 'panini' ) ;

gulp . task ( 'default' , function ( ) {
  gulp . src ( 'pages/**/*.html' )
    . pipe ( panini ( {
      root : 'pages/' ,
      layouts : 'layouts/' ,
      partials : 'partials/' ,
      helpers : 'helpers/' ,
      data : 'data/'
    } ) )
    . pipe ( gulp . dest ( 'build' ) ) ;
} ) ;

Notez que Panini charge les dispositions, les partiels, les aides et les fichiers de données une fois en première exécution. Chaque fois que ces fichiers changent, appelez panini.refresh() pour le mettre à jour. Vous pouvez facilement le faire à l'intérieur d'un appel à gulp.watch() :

 gulp . watch ( [ './src/{layouts,partials,helpers,data}/**/*' ] , [ panini . refresh ] ) ; 

Options

root

Type: String

Chemin vers le dossier racine toutes les pages vivent. Cette option n'attire pas les fichiers eux-mêmes pour le traitement - c'est ce que est gulp.src() . Ce paramètre indique à Panini quelle est la racine commune des pages de votre site.

layouts

Type: String

Chemin vers un dossier contenant des dispositions. Les fichiers de mise en page peuvent avoir l'extension .html , .hbs ou .handlebars . Une mise en page doit être nommée par default . Pour utiliser une mise en page autre que la valeur par défaut sur une page spécifique, remplacez-la dans le premier domaine de cette page.

---
layout: post
---

<!-- Uses layouts/post.html as the template -->

Toutes les dispositions ont un guidon spécial partiel appelé body qui contient le contenu de la page.

 <!-- Header up here -->
{{ > body}}
<!-- Footer down here -->

pageLayouts

Type: Object

Une liste de préréglages pour les dispositions de page, regroupées par dossier. Cela vous permet de définir automatiquement toutes les pages d'un certain dossier pour avoir la même mise en page.

 panini ( {
  root : 'src/pages/' ,
  layouts : 'src/layouts/' ,
  pageLayouts : {
    // All pages inside src/pages/blog will use the blog.html layout
    'blog' : 'blog'
  }
} )

partials

Type: String

Chemin vers un dossier contenant des partiels HTML. Les fichiers partiels peuvent avoir l'extension .html , .hbs ou .handlebars . Chacun sera enregistré en tant que guidon partiel qui peut être accessible à l'aide du nom du fichier. (Le chemin d'accès au fichier n'a pas d'importance - le nom du fichier lui-même est utilisé.)

 <!-- Renders partials/header.html -->
{{ > header}}

helpers

Type: String

Chemin vers un dossier contenant des aides à guidage. Les aides du guidon sont des fichiers .js qui exportent une fonction via module.exports . Le nom utilisé pour enregistrer l'assistance est le même que le nom du fichier.

Par exemple, un fichier nommé markdown.js qui exporte cette fonction ajouterait un assistant de guidon appelé {{markdown}} .

 var marked = require ( 'marked' ) ;

module . exports = function ( text ) {
  return marked ( text ) ;
}

data

Type: String

Chemin vers un dossier contenant des données externes, qui seront transmises à chaque page. Les données peuvent être formatées en JSON ( .json ) ou yaml ( .yml ). Dans un modèle, les données sont stockées dans une variable avec le même nom que le fichier d'où il vient.

Par exemple, un fichier nommé contact.json avec des paires de touches / valeur telles que les suivantes:

 {
    "name" : "John Doe" ,
    "email" : "[email protected]" ,
    "phone" : "555-1212"
}

Pourrait être utilisé pour produire la valeur de John Doe dans un modèle à l'aide de la syntaxe du guidon de {{contact.name}} .

Les données peuvent également être un fichier .js avec un module.exports . Les données renvoyées par la fonction d'exportation seront utilisées.

Les données peuvent également être insérées dans la page elle-même avec un modèle de matière avant en haut du fichier.

Enfin, la variable page réservée est ajoutée à chaque modèle de page au fur et à mesure qu'il rend. Il contient le nom de la page rendue, sans l'extension.

CLI

Vous pouvez également utiliser Panini via la CLI.

 Usage: panini --layouts=[layoutdir] --root=[rootdir] --output=[destdir] [other options] 'pagesglob'

Options:
  --layouts  (required) path to a folder containing layouts
  --root     (required) path to the root folder all pages live in
  --output     (required) path to the folder compiled pages should get sent to
  --partials            path to root folder for partials
  --helpers             path to folder for additional helpers
  --data                path to folder for additional data

the argument pagesglob should be a glob describing what pages you want to apply panini to.

Example: panini --root=src/pages --layouts=src/layouts --partials=src/partials --data=src/data --output=dist 'src/pages/**/*.html'

Développement local

git clone https://github.com/foundation/panini
cd panini
npm install

Utilisez npm test pour exécuter des tests.