panini

Panini

Un generador de archivos planos súper simples para usar con Gulp. Compila una serie de páginas HTML utilizando un diseño común. Estas páginas también pueden incluir parciales HTML, ayudantes de manillar externos o datos externos como JSON o YAML.

Panini no es un generador de sitio estático completo: en lugar de resuelve el problema muy específico de ensamblar archivos planos a partir de elementos comunes, utilizando un lenguaje de plantilla.

Instalación

npm install panini --save-dev

Uso

Alimente a Panini un flujo de archivos HTML y obtenga un delicioso sitio aplanado del otro extremo.

 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' ) ) ;
} ) ;

Tenga en cuenta que Panini carga diseños, parciales, ayudantes y archivos de datos una vez en la primera ejecución. Cada vez que cambian estos archivos, llame panini.refresh() para actualizarse. Puede hacer esto fácilmente dentro de una llamada a gulp.watch() :

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

Opción

root

Tipo: String

Ruta hacia la carpeta raíz todas las páginas en las que viven. Esta opción no extrae los archivos para su procesamiento, para eso es para qué sirve gulp.src() . Esta configuración le dice a Panini cuál es la raíz común de las páginas de su sitio.

layouts

Tipo: String

Camino a una carpeta que contiene diseños. Los archivos de diseño pueden tener la extensión .html , .hbs o .handlebars . Un diseño debe ser nombrado default . Para usar un diseño que no sea el predeterminado en una página específica, anularlo en la materia frontal en esa página.

---
layout: post
---

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

Todos los diseños tienen un manillar especial parcial llamado body que contiene el contenido de la página.

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

pageLayouts

Tipo: Object

Una lista de presets para diseños de página, agrupados por carpeta. Esto le permite configurar automáticamente todas las páginas dentro de una determinada carpeta para tener el mismo diseño.

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

partials

Tipo: String

Camino a una carpeta que contiene parciales HTML. Los archivos parciales pueden tener la extensión .html , .hbs o .handlebars . Cada uno se registrará como un manillar parcial a los que se puede acceder utilizando el nombre del archivo. (La ruta al archivo no importa, solo se usa el nombre del archivo en sí).

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

helpers

Tipo: String

Camino a una carpeta que contiene ayudantes de manillares. Los ayudantes de Handlebars son archivos .js que exportan una función a través de module.exports . El nombre utilizado para registrar el ayudante es el mismo que el nombre del archivo.

Por ejemplo, un archivo llamado markdown.js que exporta esta función agregaría un ayudante de manillares llamado {{markdown}} .

 var marked = require ( 'marked' ) ;

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

data

Tipo: String

Ruta a una carpeta que contiene datos externos, que se pasarán a cada página. Los datos pueden formatearse como JSON ( .json ) o YAML ( .yml ). Dentro de una plantilla, los datos se almacenan dentro de una variable con el mismo nombre que el archivo del que proviene.

Por ejemplo, un archivo llamado contact.json con pares de clave/valor como el siguiente:

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

Podría usarse para generar el valor de John Doe dentro de una plantilla utilizando la sintaxis del manillar de {{contact.name}} .

Los datos también pueden ser un archivo .js con un module.exports . Se utilizarán los datos devueltos por la función de exportación.

Los datos también se pueden insertar en la página con una plantilla de materia frontal en la parte superior del archivo.

Por último, la variable page reservada se agrega a cada plantilla de página a medida que avanza. Contiene el nombre de la página que se presenta, sin la extensión.

CLI

También puede usar Panini a través de 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'

Desarrollo local

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

Use npm test para ejecutar pruebas.