generator infinitely static

infinitamente estático

Este é um gerador de páginas estáticas com suporte básico para roteamento. A ideia por trás desta ferramenta é agilizar o desenvolvimento de páginas estáticas com o melhor do Webpack e ferramentas relacionadas.

O que está incluído?

• Ferramentas de linting com padrões sensatos - stylelint e eslint
• Recarregamento a quente em desenvolvimento
• Babel com predefinição de ambiente ativada que também cuida de polyfills
• Minificação de JavaScript e remoção de código morto
• Compilação, prefixação e minificação SASS
• Uma biblioteca para gerenciar pontos de interrupção de mídia (media-blender)
• Guidão como linguagem de modelo (com auxiliares, layouts e parciais)
• Suporte para rotas (estrutura de construção plana e aninhada)

Começando

Executar isso é muito simples. Você precisará deste gerador e yo instalado.

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

Nota : Após a inicialização do projeto, execute npm install husky --save-dev .

Desenvolvimento

Quando Yeoman terminar, você terá um projeto em funcionamento.

Executando servidor de recarga a quente

 npm start

Construção de produção

 npm run build

Rotas

Adicionar rotas também é simples. Na raiz do projeto você encontrará routes.json , contendo o index inicial da rota. A configuração da rota também suporta aninhamento e dados de modelo.

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

Depois, em seus modelos você pode usar o auxiliar {{linkTo}} incluído assim:

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

E para os dados do usuário você pode usar o auxiliar getDataAsString :

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

Se os dados forem simples (matriz, string, número, etc.), eles serão mostrados normalmente, mas se você fizer referência a um objeto, obterá um JSON stringificado. Mas lembre-se, os dados podem ser acessados ​​diretamente usando o objeto htmlWebpackPlugin.options no modelo:

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

Dessa forma, você pode iterar por meio de um array especificado no contexto usando os auxiliares integrados.

Licença

A licença do MIT

© 2016 Infinum Inc.