generator infinitely static

infinitamente estático

Este es un generador de páginas estáticas con soporte básico para enrutamiento. La idea detrás de esta herramienta es agilizar el desarrollo de páginas web estáticas con lo mejor de Webpack y herramientas relacionadas.

¿Qué está incluido?

• Herramientas de liting con valores predeterminados sensatos: stylelint y eslint
• Recarga en caliente en desarrollo
• Babel con entorno preestablecido activado que también se encarga de los polyfills
• Minificación de JavaScript y eliminación de código muerto
• Compilación, prefijo y minificación de SASS
• Una biblioteca para gestionar puntos de interrupción de medios (media-blender)
• Manillar como lenguaje de plantillas (con ayudas, diseños y parciales)
• Soporte para rutas (estructura de construcción plana y anidada)

Empezando

Ejecutar esto es realmente simple. Necesitará este generador y yo instalado.

npm install -g yo generator-infinitely-static
mkdir my-project
cd my-project
git init
yo infinitely-static

Nota : Una vez inicializado el proyecto, ejecute npm install husky --save-dev .

Desarrollo

Cuando Yeoman termina, tienes un proyecto en funcionamiento.

Ejecutando servidor de recarga en caliente

 npm start

Construcción de producción

 npm run build

Rutas

Agregar rutas también es sencillo. En la raíz del proyecto encontrará routes.json , que contiene la ruta index inicial. La configuración de ruta también admite datos de plantilla y anidamiento.

 {
  "index" : { // points to the template file in app/templates/pages/index.hbs
    "route" : "/" , // don't forget the trailing slash
    "context" : { // data that you can use in the page
      "user" : {
        "name" : "Super user"
      }
    }
  } ,
  "contact" : {
    "route" : "contact/me/" // will generate nested routes
    }
  }
}

Luego, en tus plantillas puedes usar el asistente {{linkTo}} incluido de esta manera:

 < a href =" {{linkTo 'index'}} " > Home </ a >

Y para los datos del usuario puedes usar el asistente getDataAsString :

 < h1 > {{getDataAsString 'user.name'}} </ h1 >

Si los datos son simples (matriz, cadena, número, etc.), se mostrarán como de costumbre, pero si hace referencia a un objeto, obtendrá un JSON en cadena. Pero recuerde, se puede acceder a los datos directamente utilizando el objeto htmlWebpackPlugin.options en la plantilla:

 < h1 > {{htmlWebpackPlugin.options.context.user.name}} </ h1 >

De esa manera, puede iterar a través de una matriz especificada en el contexto utilizando los ayudantes integrados.

Licencia

La licencia MIT

© 2016 Infinum Inc.