我有一个 Gulp 插件,stratic-paginate-indexes
:
'use strict';
var through2 = require('through2'),
path = require('path');
function makePage(originalFile, page, pageNumber) {
var newFile = originalFile.clone();
newFile.data = newFile.data || {};
newFile.data.posts = page;
newFile.data.page = pageNumber;
if (pageNumber === 1) return newFile;
var filePath = path.parse(newFile.path);
filePath.dir = path.join(filePath.dir, 'page', pageNumber.toString());
newFile.path = path.format(filePath);
return newFile;
}
module.exports = function() {
return through2.obj(function(file, enc, callback) {
var pageNumber = 1,
pageFiles = [],
page = [];
while (file.data.posts > 0) {
page = file.data.posts.splice(5);
var newFile = makePage(file, page, pageNumber);
pageFiles.push(newFile);
pageNumber++;
}
// Per-index page counts
pageFiles.forEach(function(file) {
file.data.pageCount = pageFiles.length;
this.push(file);
}, this);
callback();
});
};
该插件旨在接收代表博客文章索引的 Vinyl 文件。对于索引 file
,file.data.posts
是 Vinyl 文件数组,表示要包含在呈现页面上的各个帖子。这是我在其中使用的 Gulp 任务:
var jade = require('gulp-jade');
var rename = require('gulp-rename');
var remark = require('gulp-remark');
var remarkHtml = require('remark-html');
var adjustHeaders = require('remark-rewrite-headers');
var parse = require('stratic-parse-header');
var dateInPath = require('stratic-date-in-path');
var postsToIndex = require('stratic-posts-to-index');
var paginateIndexes = require('stratic-paginate-indexes');
var addsrc = require('gulp-add-src');
gulp.task('post-index', function() {
return gulp.src('src/blog/*.md')
.pipe(parse())
.pipe(remark().use(remarkHtml).use(adjustHeaders))
.pipe(dateInPath())
.pipe(addsrc('src/blog/index.jade'))
.pipe(postsToIndex('index.jade'))
.pipe(paginateIndexes())
.pipe(jade({pretty: true, basedir: __dirname}))
.pipe(rename({ extname: '.html' }))
.pipe(gulp.dest('dist/blog'));
});
但是,此设置实际上根本不输出任何索引页。
最初,您看到的 while
循环中的逻辑是使用 Array.prototype.forEach
和 Array.prototype.shift
实现的:
file.data.posts.forEach(function(post) {
page.push(post);
if (page.length === 10) {
var newFile = makePage(file, page, pageNumber);
pageFiles.push(newFile);
page = [];
pageNumber++;
}
});
// Handle the last page which won't have 10 posts (and so will fail the above `if` test)
if (page.length > 0) pageFiles.push(makePage(file, page, pageNumber));
这实际上创建了索引文件,但具有 super 奇怪的file.data.posts
值。如果我没记错的话,它看起来就像每个页面的 file.data.posts
被设置为最后几篇文章(即最终页面的 file.data 的值。帖子
),但我不确定这就是发生的事情。
总之,我有点不知所措。对我来说,这似乎是真正简单的代码,我花了很多时间尝试调试,但毫无结果。
(请注意,我也是管道中其他几个插件的作者。可能是我在那些导致这个神秘错误的插件中做了一些愚蠢的事情。Gulpfile 中的所有内容都发布在npm,但 stratic-paginate-indexes
是一个明显的异常(exception),因此,如果问题出在哪里,请随意查看其他模块。)
编辑:
修复了答案中指出的一些错误后,现在的实现是这样的:
while (file.data.posts.length > 0) {
page = file.data.posts.splice(0, 5);
var newFile = makePage(file, page, pageNumber);
pageFiles.push(newFile);
pageNumber++;
}
但是,由于某种原因,这会导致输出无限系列的页面,每个页面都具有原始 file.data.posts
的相同前 5 个元素。几乎就像我在使用 Array.prototype.slice 一样(显然我没有使用)。
最佳答案
For an index file,
file.data.posts
is an array of Vinyl files representing individual posts
如果这是真的,那么您的问题是以下两行:
while (file.data.posts > 0) {
page = file.data.posts.splice(5);
在第一行中,您将数组本身与 0 进行比较。您需要比较数组的长度
:
while (file.data.posts.length > 0) {
但这还不够。在第二行中,您调用 Array.splice()
有一个参数。这将从 file.data.posts
中删除除前 5 个元素之外的所有内容,因此 file.data.posts.length
将永远保持在 5。 Boom。无限循环。
如果我理解正确的话,您希望将数组分成 5 组。在这种情况下,第二行应该是这样的:
page = file.data.posts.splice(0, 5);
这会将前 5 个帖子放入 page
中,并将它们从 file.data.posts
中删除。
关于javascript - Gulp插件: splitting a Vinyl file into multiple files doesn't properly divide data,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41329901/