Maquetus NPM | npm.io

Maquetus

Maquetus es un sencillo generador de archivos estáticos que se usa con Gulp. Compila una serie de páginas en Handlebars a HTML pudiendo usar partials, helpers o datos procedentes de un archivo JSON o YAML.

Instalación

npm install maquetus

Uso

Estructura de archivos

.
├── ...
├── src       
│   ├── data  
|       ├── example.json       
|       ├── example2.yml     
|       └── ...   
│   ├── helpers
|       ├── bold.js       
|       └── ...
│   ├── layouts    
|       ├── default.hbs      
|       ├── post.hbs      
|       └── ...
│   ├── pages    
|       ├── index.hbs      
|       ├── post.hbs      
|       └── ...
│   └── partials    
|       ├── header.hbs      
|       ├── footer.hbs      
|       └── ...    
└── ...

Nota: Las páginas, los partials y los layouts pueden usar las extensiones .html, .hbs, or .handlebars.

Gulpfile

const gulp = require('gulp');
const maquetus = require('maquetus');

gulp.task('default', function() {
    gulp.src('./src/pages/**/*.hbs')
    .pipe(maquetus({
        layouts: './src/layouts',
        partials: './src/partials',
        helpers: './src/helpers',
        data: './src/data',
        hbsOptions: {
            explicitPartialContext: true
        },
        customHelpers: {
            test: (a, b, opts) => {
                if (a === b) {
                    return opts.fn(this)
                } else {
                    return opts.inverse(this)
                }
            }
        },
        customPartials: {
            test: () => `<div>test</div>`
        },
        globalVariables: {
            var: 'foo'
        }
    }))
    .pipe(gulp.dest('./dist'));
});

Opciones

Opción	Tipo	Descripción
`layouts`	`String`	Ruta que contiene los layouts. Es necesario tener uno llamado `default`.
`partials`	`String` o `Object`	Ruta que contiene los partials. Cada partial se registrará en Handelbars con la ruta del archivo. En caso de usar un objeto usará la key del objeto como alias.
`helpers`	`String`	Ruta que contiene los helpers. Cada helper se registrará en Handelbars con el nombre del archivo.
`data`	`String`	Ruta que contiene los data. Los datos del archivo serán accesibles mediante una variable llamada igual que el nombre del archivo. Los archivos pueden ser JSON (`.json`) o YAML (`.yml`)
`hbsOptions`	`Object`	Opciones para Handelbars
`customHelpers`	`Object`	Regístrar helpers programáticamente.
`customPartials`	`Object`	Regístrar partials programáticamente.
`globalVariables`	`Object`	Variables globales.

Ejemplos

Layouts

layouts/post.hbs

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{{ pageTitle }}</title>
    </head>
    <body>
        <main>
            <h1>{{ postTitle }}</h1>
            {{ body }}
        </main>
        <aside>
            <!-- ... -->
        </aside>
    </body>
</html>

pages/post.hbs

---
layout: post
pageTitle: Best Blog
postTitle: Lorem ipsum
---

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>

Nota: Si el layout no está definido llamará por defecto al default.

Partials

gulpfile.js

// Single path
maquetus({
    partials: './src/partials'
})

// Multiple paths
maquetus({
    partials: {
        components: './src/components',
        partials: './src/partials'
    }
})

post.hbs

---
layout: post
---

<!-- Si es de tipo String -->
{{> header }}
{{> subDir/example }} <!-- En caso de estar en un subdirectorio -->

<!-- Si es de tipo Object -->
{{> components/example }}
{{> components/subDir/example }} <!-- En caso de estar en un subdirectorio -->
{{> partials/example }}
{{> partials/subDir/example }} <!-- En caso de estar en un subdirectorio -->

Data

Importante: No usar las variables body, root y page ya que se usan por maquetus.

example.json

{
    "name": "Javier Puche",
    "phone": "666 66 66 66"
}

index.hbs

<h2>{{ example.name }}</h2>
<p>{{ example.phone }}</p>

Helpers

Maquetus ya incluye algunos helpers:

ifpage

{{#ifpage 'index'}}
  <p>Se mostrará si la página se llama index.html</p>
{{/ifpage}}

unlesspage

{{#ifpage 'index'}}
  <p>No se mostrará si la página se llama index.html</p>
{{/ifpage}}

repeat

<ul>
  {{#repeat 5}}
      <li>Lorem ipsum dolor sit amet.</li>
  {{/repeat}}
</ul>

markdown

{{#markdown}}
    # Heading 1
    Lorem ipsum [dolor sit amet](http://html5zombo.com), consectetur adipisicing elit. Nam dolor, perferendis. Mollitia aut dolorum, est amet libero eos ad facere pariatur, ullam dolorem similique fugit, debitis impedit, eligendi officiis dolores.
{{/markdown}}

eq

{{#eq var 'value'}}
    Print this
{{/eq}}

concat

{{> partialExample title=(concat foo bar) }}

#### Custom Helpers

bold.js

module.exports = function(options) {
  const bolder = '<strong>' + options.fn(this) + '</strong>';
  return bolder;
}

index.hbs

<p>{{#bold}}Lorem ipsum dolor sit amet.{{/bold}}</p>

gulp handlebars hbs compile html

colors directory-tree fancy-log front-matter glob handlebars highlight.js js-beautify js-yaml marked through2

@infinitebrahmanuniverse/nolb-maq @everything-registry/sub-chunk-2130 maquetus-boilerplate-builder @zalastax/nolb-maq

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago