Gulp html templating

Question

Gulp html templating

1.4k views Asked by MeetMahPuppy At 06 February 2016 at 15:00

Has anyone knew any "gulp" plugin which compiles(bundles) different files with something .html extension into one file? Or which closer to what I am trying to achieve?

ex.

      build
        |- html
            |- header.html
            |- footer.html
            |- main-section.html
        |- index.html
      dist 
        |- index.html(result)

on index.html file on build

      ... some meta tags
      ...
      somewhere inside body tag

  /* I want something like */
  require('build/html/header.html);
  require('build/html/main-section.html);
  require('build/html/footer.html);
</pre>

And the output would be the html inside of those files. Where also each of those files(header, ...) have something require also.

P.S. Can someone list of them with links, please? Thanks alot.

Original Q&A

There are 2 answers

**Kylar** · Answer 1 · 2016-12-19 03:11:00

A better one might be gulp-inject-multiple-files.

In gulp file:

gulp.task('inject-files',function(){
 // begin injection 
  gulp.src('foo.html')
    .pipe(injectfiles('foo.html','parts'))
    .pipe(gulp.dest('temp'));

});

In your index.html file:

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head-->
  <!-- inject:footer-->
</head>
<body>
</body>
</html>

If this is for email templates, may I also recommend Zurb/Inky. They are quite easy to use and they don't break very often in outlook

**Eran Shabi** · Answer 2 · 2016-02-06 16:43:15

You can use gulp-inject. From the README at github:

In order to inject files contents you have to provide custom transform function, that will return file contents as string. You also have to omit {read: false} option of gulp.src in this case. Example below shows how to inject contents of html partials into head of index.html:

    gulp.src('./src/index.html')
  .pipe(inject(gulp.src(['./src/partials/head/*.html']), {
    starttag: '<!-- inject:head:{{ext}} -->',
    transform: function (filePath, file) {
      // return file contents as string 
      return file.contents.toString('utf8')
    }
  }))
  .pipe(gulp.dest('./dest'));

And in your ./src/index.html:

<!DOCTYPE html>
<html>
<head>
  <title>My index</title>
  <!-- inject:head:html -->
  <!-- contents of html partials will be injected here -->
  <!-- endinject -->
</head>
<body>
</body>
</html>

TechQA.

Gulp html templating

There are 2 answers

Related Questions in HTML

Related Questions in TEMPLATES

Related Questions in GULP

Related Questions in GULP-PLUGIN

Popular Questions

Popular Tags

Trending Questions