Include HTML com Gulp

Aprenda como gerar templates HTML de forma eficiente utilizando o Gulp e a funcionalidade de includes! Instale o módulo gulp-file-include e siga o exemplo abaixo:

@@include('header.html')
  
  <article>
    <header>
      <h1>Título do artigo</h1>
    </header>
     
    <section>
      <h3>Subtítulo do artigo</h3>
      <p>Mussum Ipsum, cacilds vidis litro abertis. Nullam volutpat risus nec leo commodo, ut interdum diam laoreet.</p>
       
      <h4>Outro subtítulo do artigo</h4>
      <p>Sed non consequat odio. Manduma pindureta quium dia nois paga. Quem num gosti di mum que vai caçá sua turmis! A ordem dos tratores não altera o pão duris</p>
    </section>
   
    <footer>
      <h4>Bio do Author</h4>
      <p>Vide electram sadipscing et per. Praesent vel viverra nisi.</p>
    </footer>
   
  </article>

  @@include('sidebar.html')

@@include('footer.html')

Inclua no arquivo gulpfile.js:

var gulp = require('gulp')
  , fileinclude = require('gulp-file-include');
 
gulp.task('default', function() {
  gulp.src(['index.html'])
    .pipe(fileinclude())
    .pipe(gulp.dest('./'));
});

Quer saber mais sobre como gerar templates HTML com Gulp? Leia o Como gerar templates HTML com Gulp. Assim, você aprenderá a melhorar a organização do seu código e otimizar o desenvolvimento web com Gulp e includes.