Gulp html templating

Question

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.

score 2 · Answer 1 · answered Feb 06 '16 at 16:43

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>

I see, so some one have created such, thanks. I appreciate your answer, but the syntax is kinda odd. Do you know anything else? with one line syntax? something like(ex. php) — MeetMahPuppy, Feb 07 '16 at 00:51

score 0 · Answer 2 · answered Dec 19 '16 at 03:11

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

Gulp html templating

2 Answers2