Como gerar templates HTML com Gulp
Recentemente, percebi a necessidade de voltar a codificar em HTML puro com uso de markdown. Isso mesmo, nada de WordPress, Grav, CMS e outras ferramentas complexas! As razões para essa escolha são as seguintes:
- Utilização de includes HTML para melhor organização do código
- Melhor desempenho do site
- Remoção de camadas desnecessárias de desenvolvimento
- O cache é integrado ao próprio HTML, proporcionando maior eficiência
- Ausência de servidor de banco de dados, simplificando a infraestrutura
- Redução significativa no tamanho do projeto, facilitando a manutenção
- Aumento da velocidade no desenvolvimento do projeto
Se você já conhece o Gulp fica fácil, basta instalar o plugin gulp-file-include e começar a usar. Se ainda não conhece, já passou da hora de conhecer. Nosso gulpfile.js ficará mais ou menos assim:
var gulp = require('gulp')
, fileinclude = require('gulp-file-include');
gulp.task('default', function() {
gulp.src(['index.html'])
.pipe(fileinclude())
.pipe(gulp.dest('./'));
});Agora, o esquema de templates em HTML com includes pode ser feito da seguinte forma:
<!DOCTYPE html>
<html>
<body>
@@include('./header.html')
Conteúdo da página...
</body>
</html>Mas não se limite a isso! Você pode importar variáveis e personalizar filtros, além de aproveitar todas as vantagens que o Gulp pode oferecer, como conversão de arquivos Markdown, minificação de estilos e scripts JavaScript, redimensionamento de imagens, entre outras funcionalidades. Veja o exemplo abaixo:
var gulp = require('gulp')
, markdown = require('markdown')
, fileinclude = require('gulp-file-include');
// importa json para variável
var app = require('./package.json')
// task principal
gulp.task('default', function() {
gulp.src(['index.html'])
.pipe(fileinclude({
filters: {
markdown: markdown.parse
context: {
variavelCustomizada: app.name,
comQualquerNome: app.version
}
}
}))
.pipe(gulp.dest('./'));
});No entanto, um sistema assim só funciona para pessoas que tem afinidade com desenvolvimento. Esta não é uma solução para um cliente ou "usuário final". Ou seja, aquela pessoa que não tem afinidade com tecnologia e já acha difícil fazer um login e mexer administrador com editor HTML não saberia administrar um site baseado em linhas de comando.
Saiba mais sobre o plugin gulp-file-include na sua página oficial: https://www.npmjs.com/package/gulp-file-include
O que achou do artigo?
Escreva um comentário, deixe-me saber o que achou do artigo. Se tens uma dúvida basta perguntar:
Resposta ao comentário:
10 Comentários