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

$3

`
.
├── ...
├── 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.

$3

`js
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: () =>


},
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

$3

layouts/post.hbs

`html








{{ postTitle }}

{{ body }}





`

pages/post.hbs

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit.


`

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

$3

gulpfile.js

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

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

post.hbs

`html
---
layout: post
---


{{> header }}
{{> subDir/example }}


{{> components/example }}
{{> components/subDir/example }}
{{> partials/example }}
{{> partials/subDir/example }}
`

$3

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

example.json

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

index.hbs

`html


{{ example.name }}

{{ example.phone }}

`

$3

Maquetus ya incluye algunos helpers:

#### ifpage

`html
{{#ifpage 'index'}}


Se mostrará si la página se llama index.html


{{/ifpage}}
`

#### unlesspage

`html
{{#ifpage 'index'}}


No se mostrará si la página se llama index.html


{{/ifpage}}
`

#### repeat

`html


{{#repeat 5}}

• Lorem ipsum dolor sit amet.

{{/repeat}}


`

#### markdown

`html
{{#markdown}}
# Heading 1
Lorem ipsum dolor sit amet, 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

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

#### concat

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

#### Custom Helpers

bold.js

`js
module.exports = function(options) {
const bolder = '' + options.fn(this) + '';
return bolder;
}
`

index.hbs

`html


{{#bold}}Lorem ipsum dolor sit amet.{{/bold}}


``