How to produce multiple html files from a single jade template with Gulp and gulp-data

Question

I am creating a static site generator with Gulp. I'm wondering how to pipe each piece of data(JSON) into a single jade template to produce multiple html files. Here is the gulp 'templates' task:

gulp.task('templates', function () {
  'use strict';

  var myData = JSON.parse(fs.readFileSync('./_assets/data/content.json'));

  var myPages = myData.pages;
  var myPosts = myData.posts;

  gulp.src('./_assets/templates/index.jade')
    .pipe(data(function (file) {
      return myData;
    }))
    .pipe(jade())
    .pipe(minifyhtml())
    .pipe(gulp.dest('./_site/'))
    .pipe(connect.reload());

  // this is my dumb attempt at trying to 
  // output each piece of data and than 
  // have jade create an html file...
  for (var i in myPages) {
    gulp.src('./_assets/templates/page.jade')
    .pipe(data(function (file) {
      return myPages[i];
    }))
    .pipe(jade())
    .pipe(minifyhtml())
    .pipe(gulp.dest('./_site/'))
    .pipe(connect.reload());    
  }

});

function applyTemplate(data, template) {
  'use strict';
  // I was thinking maybe another function could 
  // take care of applying a template to each json 
  // data object in both 'posts' or 'pages'
  return;
}

And here is the data that is produced from all of my content and put into a JSON structured file called content.json

{
  "pages": {
    "projects": {
      "title": "projects",
      "body": ""
    },
    "another": {
      "title": "another",
      "body": ""
    },
    "about": {
      "title": "about",
      "body": "<p>This page is dedicated to the about me section of the site :). Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non in totam suscipit laborum nam nobis. Mollitia, adipisci, iusto impedit molestiae, sapiente numquam laborum dignissimos quam animi eius ipsum eaque voluptate. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi, possimus quia. Deleniti itaque facilis eius, possimus sint molestiae repellendus, repellat, rerum quis aliquam voluptate quidem voluptas dignissimos, perferendis molestias sequi. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quisquam reiciendis corporis, molestiae tempora similique laudantium eaque fuga, fugit delectus molestias omnis incidunt nostrum expedita! Aliquid temporibus eum dolor, beatae saepe.</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, commodi, quos. Ratione laborum assumenda aliquam soluta consequatur alias, recusandae corporis, quidem eveniet quo natus nulla voluptates praesentium aperiam ducimus ea!</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quae numquam, doloremque dicta magni quaerat consequatur culpa quisquam dolore. Modi at rerum reiciendis esse, deserunt sit culpa repudiandae repellat, id earum. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores sunt officiis fugit dolor quisquam aut eveniet odio delectus quam quasi debitis quas, eligendi consequatur iste aperiam minus nemo soluta a.</p>\n"
    },
    "page": {
      "title": "page",
      "body": ""
    },
    "test": {
      "title": "test",
      "body": ""
    }
  },
  "posts": {
    "whatsnext": {
      "title": "What's Next?!",
      "date": "04/01/2015",
      "published": true,
      "body": "<p>So I need to come up with some kind of plan of attack towards this project. Ive mostly been just messing around with gulp im going to list out what needs to be done next. Bare with me...(talking to myself?).</p>\n<h3 id=\"things-to-do-\">Things to do:</h3>\n<ul>\n<li>Instead of converting to json just extract front matter and post .md--&gt;.html transfer in the templates</li>\n<li>organize folder structure to better reflect this project and change the templating system to something simple project:<ul>\n<li>_assets/<ul>\n<li>scripts/</li>\n<li>templates/</li>\n<li>styles/</li>\n<li>images/</li>\n<li>etc.../</li>\n</ul>\n</li>\n<li>_content/<ul>\n<li>posts/</li>\n<li>pages/</li>\n</ul>\n</li>\n<li>.gitignore</li>\n<li>gulpfile.js</li>\n<li>prose.yml</li>\n<li>travis.yml</li>\n<li>package.json</li>\n<li>readme.md</li>\n</ul>\n</li>\n<li>Create a simple, global cli to &quot;scaffold&quot; sites that utilize the scope of this project. Some helpful links:<ul>\n<li><a href=\"http://tutorialzine.com/2014/09/creating-your-first-node-js-command-line-application/\">http://tutorialzine.com/2014/09/creating-your-first-node-js-command-line-application/</a></li>\n<li><a href=\"http://cruft.io/posts/node-command-line-utilities\">http://cruft.io/posts/node-command-line-utilities</a></li>\n</ul>\n</li>\n<li>git r done</li>\n</ul>\n"
    },
    "itsalive": {
      "title": "Its Alive!!!",
      "date": "2/24/2015",
      "published": true,
      "body": "<p>My site is finally coming together. I need to check out more on the gulp subject and get everything working correctly. Some helpful links will be <a href=\"http://blog.crushingpennies.com/a-static-site-generator-with-gulp-proseio-and-travis-ci.html\">gulp + prose</a> and another one: <a href=\"http://www.rioki.org/2014/06/09/jekyll-to-gulp.html\">from jekyll to gulp</a>. And now for a weird baby.</p>\n<p><img src=\"../../_assets/images/babycreep.gif\" alt=\"dat baby creep\"></p>\n<p>The goal of this project is to create something that resembles a cms without all of the bloat. I&#39;ve been working with Drupal and its a very powerful tool but it comes at a price for developers. I&#39;m really wanting to cut out php and myself and focus on what the web wants and that is html, css, and JavaScript... nothing more...except for all the other things written in node(js) and maybe some ruby</p>\n"
    },
    "secondpost": {
      "title": "Test",
      "date": "2/24/2015",
      "body": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam obcaecati expedita dolorem unde nemo, veritatis quidem velit perspiciatis illum quasi ratione. Provident et reiciendis numquam maxime, alias, aliquid harum omnis. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi optio nostrum, incidunt aut! Illo, architecto, numquam? Neque commodi ex tempora. Dolorem rem omnis nulla ab blanditiis saepe at id, dolore.</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias eius officia officiis quos, obcaecati tempora suscipit optio rem. Deserunt qui, quidem. Fuga hic dolor sit voluptatem qui, dignissimos. Consequuntur, sint!</p>\n<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dignissimos voluptatem nemo quae neque a dolorum provident culpa error corporis, fuga alias corrupti, quaerat illum facere, et repellat voluptatibus similique? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores veniam impedit esse iure, sint repellat facilis. Rerum excepturi eos hic incidunt quam, quidem sit odio dignissimos tenetur neque beatae illo.</p>\n"
    }
  }
}

As you can see, the data from 'content.json' is easily parsed and piped into to my jade template. Where i'm falling short is how to produce multiple html files with the data and using just one template file for each type of data

example: 'pages.jade' will be "applied" to each page of pages in the content.json file, and outputted as separate html files like 'about.html', 'anotherpage.html'.

Let me know if you need more information and thank you sooo much for taking the time to look at my question!

• Chris

Answer 1

I came up with two possible solutions. I'm using swig, but it should be the same for any other template language.

First solution may look a bit 'hackish', as it uses symlinks to "simulate" an HTML template for each of our JSON files. That is, for each HTML file we want to create, we have a symlink pointing to our single swig template file. So, we have: product-A.html -> product.swig.tpl, product-B.html -> product.swig.tpl, product-C.html -> product.swig.tpl and so on (all the symlinks and the swig template are stored in _assets/html/ folder.
Then, we have our JSON files in _assets/data/ folder (product-A.json, product-B.json, product-C.json, etc).

The code:

var gulp = require('gulp');
var swig = require('gulp-swig');
var data = require('gulp-data');
var path = require('path');

var config = {
        html: {
          src: '_assets/html/*.html',
          dest: '_build/html'
        },
        data: {
          src: '_assets/data/*.json'
        }
      }

var getJsonData = function(file) {
  return require('./data/' + path.basename(file.path, path.extname(file.path)) + '.json');
};

gulp.task('templates', function() {
  return gulp.src(config.html.src)
    .pipe(data(getJsonData))
    .pipe(swig())
    .pipe(gulp.dest(config.html.dest))
});

Second solution uses gulp-foreach.
In this example, there is a template in _assets/html/ (for example, product.html), and then, we have a bunch of JSON files on _assets/data/ (for example, product-A.json, product-B.json, product-C.json and so on).

var gulp = require('gulp');
var swig = require('gulp-swig');
var data = require('gulp-data');
var foreach = require('gulp-foreach');
var rename = require('gulp-rename');
var path = require('path');

var config = {
        html: {
          src: '_assets/html/*.html',
          dest: '_build/html'
        },
        data: {
          src: '_assets/data/*.json'
        }
      }

var getJsonData = function(file) {
  return require(file.path);
};

gulp.task('templates', function() {
  return gulp.src(config.data.src)
    .pipe(foreach(function(stream, file){
        var jsonFile = file; // We create this 'jsonFile' variable because the 'file' variable is overwritten on the next gulp.src.
        var jsonBasename = path.basename(jsonFile.path, path.extname(jsonFile.path));
        return gulp.src(config.html.src)
          .pipe(data(getJsonData(jsonFile)))
          .pipe(swig())
          .pipe(rename(function(htmlFile) {
            htmlFile.basename = jsonBasename;
          }))
          .pipe(gulp.dest(config.html.dest))
      })
    )
});

So, basically, we create an stream with our set of JSON files, and for each file, we pick up the single template, get the data from our JSON file and apply it to the template. Then, we rename the buffer before outputting it its destination, to avoid each loop to write (overwrite) on the same file. Then, we end up with a bunch of HTML files on _build/html: product-A.html, product-C.html, product-C.html