Javascript 如何使用Gulp和Gulp数据从单个jade模板生成多个html文件
我正在使用创建静态站点生成器。我想知道如何将每一段数据（JSON）导入一个jade模板以生成多个html文件。以下是“模板”任务：Javascript 如何使用Gulp和Gulp数据从单个jade模板生成多个html文件,javascript,json,node.js,pug,gulp,Javascript,Json,Node.js,Pug,Gulp,我正在使用创建静态站点生成器。我想知道如何将每一段数据（JSON）导入一个jade模板以生成多个html文件。以下是“模板”任务： gulp.task('templates', function () { 'use strict'; var myData = JSON.parse(fs.readFileSync('./_assets/data/content.json')); var myPages = myData.pages; var myPosts = myData.p
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;
}
{
"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-->.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 "scaffold" 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've been working with Drupal and its a very powerful tool but it comes at a price for developers. I'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"
}
}
}
{
“页数”：{
“项目”：{
“标题”：“项目”，
“正文”：”
},
“另一个”：{
“头衔”：“另一个”，
“正文”：”
},
“关于”：{
“标题”：“关于”，
“正文”："本页面专门用于网站的“关于我”部分：）.Lorem ipsum Door sit amet，Concertetur Adipising Elite.nobis.Mollitia，Adipisi，iusto impedit molestiae，sapiente numquam Laboram Dignessimos quam animi eius ipsum eaque voluptate.Lorem ipsum Door sit amet，Concertetur Adipising Elite.Nisi，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有，有权拥有这是一种快速的治疗方法！暂时性的治疗，最好的治疗方法。\nLorem ipsum dolor sit amet，连续的治疗精英。尊严，商品，质量。合理的劳动假设解决了消耗性别名，身体复发，无效的液体会破坏人的健康！\nLorem ipsum dolor si这句话的意思是：“我是一位杰出的献祭者。我是一位杰出的献祭者，我是一位杰出的献祭者。我是一位伟大的献祭者，我是一位杰出的献祭者。我是一位伟大的献祭者，我是一位杰出的献祭者。我是一位杰出的献祭者，我是一位伟大的献祭者，我是一位伟大的献祭者，我是一位献祭者，我是一位杰出的献祭者。”例如，eligendi Consequarture是一个单位减去nemo Solta a.\n“
},
“第页”：{
“标题”：“第页”，
“正文”：”
},
“测试”：{
“标题”：“测试”，
“正文”：”
}
},
“员额”：{
“下一步是什么”：{
“标题”：“下一步是什么？！”，
“日期”：“2015年1月4日”，
“出版”：没错，
“身体”：“所以我需要想出一些针对这个项目的攻击计划。我大部分时间都在胡闹，我要列出下一步需要做什么。跟我一起赤裸裸地…（自言自语？）.\n要做的事情：\n\n- 不转换为json，只需在模板中提取front matter和post.md--.html传输即可。
\n- 组织文件夹结构以更好地反映此项目，并将模板系统更改为简单的项目：
\n- \u资产/
\n- 脚本/
\n- 模板/
\n- 样式/
\n- \images/
\n- 等../
\n
\n- \n
- \n
- 文章/
\n- \n
- \n
- \n
- \n
- \n
- \n
\n- 散文.yml>\n
- \n
- travis.yml>\n
- \n
- \n
- 包.json
\n- \n
- \n
- 自述文件创建一个简单的全球脚手架利用此项目范围的站点。一些有用的链接：
\n- \n
- \n
\n \n- git r done
\n
\n”
},
“它还活着”：{
“标题”：“它还活着！！！”，
“日期”：“2015年2月24日”，
“出版”：没错，
“正文”：我的网站终于整合起来了。我需要查看更多关于gulp主题的内容，并让一切正常运行。一些有用的链接将是和另一个：。现在是一个奇怪的婴儿。\n\n这个项目的目标是创建一个类似cms的东西，而不存在所有膨胀。我一直在与Drupal及其合作这是一个非常强大的工具，但对开发人员来说是要付出代价的。我'；我真的想放弃php和我自己，专注于web所需要的东西，即html、css和JavaScript……除此之外……除了用node（js）编写的所有其他东西，也许还有一些ruby\n”
},
“第二员额”：{
“标题”：“测试”，
“日期”：“2015年2月24日”，
“正文”：“知识产权”是一种美德，是一种美德，是一种美德。知识产权是一种美德，是一种美德，是一种美德，是一种真理，是一种真理，是一种准理性的智慧。是一种美德，是一种别名，是一种美德。知识产权是一种美德，是一种美德，是一种美德，是一种美德？在我国，所有人都可以享受暂时性的救济。\n知识产权是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，是一种权利，一种权利，一种权利，一种权利，一种权利，一种权利，一种权利，一种权利，一种权利他是一位杰出的献祭者。他是一位杰出的献祭者。他是一位杰出的献祭者。他是一位有远见的人，犯了错误的身体，有腐败的别名，他是一位杰出的献祭者阿拉伯联合酋长国，请你坐在贵宾席上。\n
}
}
}
- 克里斯
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))
});
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))
})
)
});