我正在使用 Gulp 创建一个静态站点生成器.我想知道如何将每条数据(JSON)通过管道传输到一个 jade 模板中以生成多个 html 文件。这是 gulp 的"template"任务:

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;
}

这是从我的所有内容中生成并放入名为 content.json 的 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"
    }
  }
}

如您所见，“content.json”中的数据很容易被解析并通过管道传输到我的 jade 模板中。我不足的地方是如何使用数据生成多个 html 文件并为每种类型的数据仅使用一个模板文件

示例:“pages.jade”将“应用”到 content.json 文件中的每一页页面，并输出为单独的 html 文件，如“about.html”、“anotherpage.html”。

如果您需要更多信息，请告诉我，非常感谢您花时间看我的问题!

• 克里斯

最佳答案

我想到了两种可能的解决方案。我使用的是 swig，但它对于任何其他模板语言都应该是相同的。

第一个解决方案 可能看起来有点“hackish”，因为它使用符号链接(symbolic link)为我们的每个 JSON 文件“模拟”一个 HTML 模板。 也就是说，对于我们要创建的每个 HTML 文件，我们都有一个指向我们单个 swig 模板文件的符号链接(symbolic link)。所以，我们有:product-A.html -> product.swig.tpl，product-B.html -> product.swig.tpl，product- C.html -> product.swig.tpl 等等(所有符号链接(symbolic link)和 swig 模板都存储在 _assets/html/ 文件夹中。
然后，我们将 JSON 文件放在 _assets/data/ 文件夹中(product-A.json、product-B.json、 product-C.json 等)。

代码:

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))
});

第二种解决方案使用gulp-foreach .
在这个例子中，_assets/html/中有一个模板(例如，product.html)，然后，我们在中有一堆JSON文件_assets/data/(例如，product-A.json、product-B.json、product-C.json等等)。

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))
      })
    )
});

因此，基本上，我们使用我们的 JSON 文件集创建一个流，对于每个文件，我们选择一个模板，从我们的 JSON 文件中获取数据并将其应用于模板。然后，我们在将缓冲区输出到目的地之前重命名缓冲区，以避免每个循环都在同一个文件上写入(覆盖)。 然后，我们在 _build/html 上得到了一堆 HTML 文件:product-A.html、product-C.html、product-C.html

关于javascript - 如何使用 Gulp 和 gulp-data 从单个 jade 模板生成多个 html 文件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28921317/