generator infinitely static

infiniment statique

Il s'agit d'un générateur de pages statiques avec une prise en charge de base du routage. L'idée derrière cet outil est de rationaliser le développement de pages Web statiques avec le meilleur de Webpack et des outils associés.

Qu'est-ce qui est inclus ?

• Outils de peluchage avec des valeurs par défaut raisonnables - stylelint et eslint
• Rechargement à chaud en développement
• Babel avec un préréglage d'environnement activé qui prend également en charge les polyfills
• Minification JavaScript et suppression du code mort
• Compilation SASS, préfixe et minification
• Une bibliothèque de gestion des points d'arrêt des médias (media-blender)
• Guidons comme langage de modèles (avec assistants, mises en page et partiels)
• Prise en charge des itinéraires (structure de construction plate et imbriquée)

Commencer

Exécuter ceci est vraiment simple. Vous aurez besoin de ce générateur et yo l'aurez installé.

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

Remarque : Une fois le projet initialisé, exécutez npm install husky --save-dev .

Développement

Lorsque Yeoman a terminé, vous avez un projet fonctionnel.

Exécution du serveur de rechargement à chaud

 npm start

Construction de la production

 npm run build

Itinéraires

L'ajout d'itinéraires est également simple. À la racine du projet, vous trouverez routes.json , contenant la route index initiale. La configuration de l'itinéraire prend également en charge les données d'imbrication et de modèle.

 {
  "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
    }
  }
}

Ensuite, dans vos modèles, vous pouvez utiliser l'assistant {{linkTo}} inclus comme ceci :

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

Et pour les données utilisateur, vous pouvez utiliser l'assistant getDataAsString :

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

Si les données sont simples (tableau, chaîne, nombre, etc.), elles seront affichées comme d'habitude, mais si vous référencez un objet, vous obtiendrez un JSON chaîne. Mais n'oubliez pas que les données sont accessibles directement en utilisant l'objet htmlWebpackPlugin.options dans le modèle :

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

De cette façon, vous pouvez parcourir un tableau spécifié dans le contexte à l'aide des assistants intégrés.

Licence

La licence MIT

© 2016 Infinum inc.