Como gerar templates HTML com Gulp

July, 2016

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('./'));
});

view raw gulpfile.js hosted with ❤ by GitHub

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('./'));
});

view raw gulpfile.js hosted with ❤ by GitHub

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:

Tags:

Compartilhar:

O que achou do artigo?