Maquetus-boilerplate NPM

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

Descarga

Descargamos git clone https://github.com/javipuche/maquetus-boilerplate.git.
Entramos en el proyecto cd maquetus-boilerplate.
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.

gulp webpack boilerplate maquetus

maquetus-boilerplate-builder

1.1.1

5 years ago