javascript - Gulp插件: splitting a Vinyl file into multiple files doesn't properly divide data

Question

我有一个 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 一样(显然我没有使用)。

Answer 1

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 中删除。