Maquetus boilerplate

Boilerplate destinado a generar el HTML, CSS, JS y los assets asociados para entregar una maquetación web.

Características

• Handlebars mediante Maquetus para el HTML.
• Estilos mediante Sass pasándole Autoprefixer.
• Transpila el Javascript mediante Babel.
• Minifica CSS y el JS.
• Optimización de imágenes.
• Lanza un servidor local para el desarrollo.
• Refresco automático del navegador al detectar un cambio.

Requisitos

• Node.js
• Gulp.js

Descarga

1. Descargamos git clone https://github.com/javipuche/maquetus-boilerplate.git.
2. Entramos en el proyecto cd maquetus-boilerplate.
3. Instalamos dependencias npm install.

Uso

• Modo desarrollo: npm run dev.
• Modo producción: npm run build.

Estructura de archivos

.
├── ...
├── builder       
├── dist       
├── src       
│   ├── assets   
│       ├── fonts   
|           └── ...   
│       ├── images   
|           └── ...   
│       ├── js   
│           ├── app   
│               ├── app.js   
|               └── ...   
|           └── ...   
│       ├── sass   
│           ├── app   
│               ├── example
│                   ├── example.scss  
|                   └── ...     
│               ├── styles.scss   
|               └── ...   
|           └── ...   
|       └── ...   
│   ├── components   
│       ├── example-component  
│           ├── example-component.config.json
│           ├── example-component.data.json  
│           ├── example-component.hbs
│           ├── example-component.md
|           └── ...  
|       └── ...   
│   ├── data   
|       └── ...   
│   ├── helpers  
|       └── ...
│   ├── layouts    
|       ├── default.hbs         
|       └── ...
│   ├── pages    
|       ├── home.hbs        
|       └── ...
│   └── partials       
|       └── ...     
└── ...

Directorios

IMPORTANTE: Será necesario reiniciar el servidor al crear, mover o borrar un archivo en los directorios sass/app y js/app, ya que son entradas en la configuración de webpack.

Directorio	Descripción
dist	Si estás en modo desarrollo sólo contendrá la carpeta docs/components, todo lo demás se carga en memoria. En modo producción contendrá el compilado final con todos los entregables y desaparecerá la carpeta docs.
src	Contiene todos los archivos del proyecto.
assets	Contiene todos los assets del proyecto, como fuente, imágenes, estilos, javascript, etc.
fonts	Contiene todas las fuentes del proyecto.
images	Contiene todas las imágenes del proyecto.
js	Contiene todo el javascript. Sólo los archivos que estén en la carpeta app se transpilarán dentro de dist/asses/js. Ej: dist/asses/js/app.js para lo común y dist/asses/js/custom.js para algo concreto.
sass	Contiene todos los estilos. Sólo los archivos que estén en la carpeta app se compilarán dentro de dist/asses/css. Ej: dist/asses/js/styles.css para lo común y dist/asses/js/custom.css para algo concreto.
components	Contiene todos los components en Handlebars.
data	Contiene todos los modelos en json o yml. Más info en Maquetus.
helpers	Contiene todos los helpers. Más info en Maquetus.
layouts	Contiene todos los layouts. Más info en Maquetus.
pages	Contiene todas las pages. Más info en Maquetus.
partials	Contiene todos los partials. Más info en Maquetus.