Template de desenvolvimento

[MathCunhaDev]

Olá pessoal, tudo bom?

Queria tirar umas dúvidas sobre criação de templates de desenvolvimento, atualmente estou como estagiário de front em uma agência e regularmente recebo jobs de desenvolver pequenos sites/landings, nesses casos eu normalmente costumo usar o grid do Bootstrap, Sass, jQuery, Npm e algumas tasks no Gulp.

Nesse sentido, eu estava pensando em criar um template com essas ferramentas já instaladas e configuradas para que não precisasse fazer tudo manualmente sempre que um projeto novo surgir.

• Como seria a melhor forma de fazer isso?
• O que além das coisas que citei seria legal ter nele?

Se alguém tiver um exemplo de template seria legal também.

Valeu!!!

[willycamargo]

Acho que Github Templates te ajuda com isso.

Ainda assim não vai conseguir fugir da estruturação desse template. Mas vale a pena se o fluxo de novos projetos é grande.

O que recomendo:

1. Crie um template com tudo instalado utilizando uma nomenclatura, imagens, favicons, etc. Tudo genérico. Ex: institucional-template, institucionalTemplate, etc.
2. Crie um script (eu usaria js + npm pra rodar, mas pode fazer com gulp mesmo) que irá passar por todo o projeto substituindo os nomes, gerando novas imagens e novos favicons.
3. Configure esse script no postinstall do package.json para rodar assim que terminar de fazer a primeira instalação (importante o script apagar esse comando assim que terminar de rodar com sucesso).

Esse cara aqui faz algo parecido: https://github.com/ericalli/static-site-boilerplate

[MathCunhaDev]

@willycamargo

Eita mano o boilerplate desse cara praticamente cria o site sozinho hahaha

Tem bastante coisa legal mas tem outras que não vou usar ou achei que tá acima do meu nível de conhecimento.

De qualquer forma, obrigado.

[theandersonn]

@matcunha Você pode escolher um boilerplate já existente, testar, ver se funciona para o que você faz; Se notar que precisa adaptar muitas coisas, crie o seu próprio.

No meu caso notei que é válido criar boilerplates pequenos e dependendo do que vou desenvolver ir colocando um dentro do outro, facilita tbm para dar manutenção.

Os boilerplates nunca ficarão 100% perfeitos, a cada projeto aparecem coisas que precisam ser melhoradas.

Tive um aprendizado bem legal, fazendo essas montagens. Hoje curto pra caramba, organiza-los.

Exemplos:

Esse aqui é para estruturas estaticas e suporte para browsers antigos
https://github.com/theandersonn/gulp-old-browsers

Para estruturas estaticas com o uso de ES6
https://github.com/theandersonn/gulp-static

Para o uso de Gulp + Grid bootstrap 3
https://github.com/theandersonn/gulp-bootstrap-3

Temas WordPress
https://github.com/theandersonn/blank-theme-wp

Somente o uso do Grid Bootstrap 3
https://github.com/theandersonn/bootstrap-grid-sass

Docker + WordPress (esse aqui atendeu tão bem ao que faço, que utilizo original do autor)
https://github.com/theandersonn/wordpress-docker-compose

Então, depende de projeto para projeto.

[felipefialho]

@matcunha Criei o Kratos Boilerplate justamente com esse propósito, normalmente vou atualizando ele conforme minhas necessidades / evolução do mercado.

Dá uma olhada depois :)

[MathCunhaDev]

Eae caras!

Demorei mas voltei hahah

Obrigado pelas dicas @theandersonn e @felipefialho achei muita coisa legal nos exemplos de vocês e nessa semana consegui fazer o meu, acho que o resultado para os meus fins será bem legal.

[caiquealves224]

Nossa, até eu que não tinha participado da discussão (até agora), fico muito agradecido, é exatamente oque eu precisava e ando procurando a algum tempo e até agora não tinha achado.

[theandersonn]

Show! é isso aí!