Gulp :将Vinyl文件分割成多个文件并不能正确地划分数据

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

这实际上创建了索引文件，但是使用了超级怪异的file.data.posts值。如果我没记错的话，看起来每个页面的file.data.posts都被设置为最后几个帖子(即最后一个页面的file.data.posts的值)，但我并不肯定这就是正在发生的事情。

总之，我有点不知所措。对我来说，这似乎是非常简单的代码，我花了很多时间尝试调试，但没有结果。

(请注意，我也是正在开发的其他插件的作者。可能是我做了一些愚蠢的事情，导致了这个神秘的错误。Gulpfile中的所有内容都是在npm上发布的，显然除了stratic-paginate-indexes之外，所以如果问题来自于其他模块，可以随意查看。)

编辑：

在修复了答案中指出的一些错误之后，现在实现如下：

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

问题在于这一行：

var newFile = originalFile.clone();

不幸的是，.clone()函数的Vinyl文档是不正确的(至少对于Vinyl0.4.x，这就是你使用Gulp 3得到的)。docs声明.clone()做深度克隆，但实际上它做浅层克隆。使用黑魔法，您可以强制调用执行深度克隆：

var newFile = originalFile.clone(true);

见gulpjs/乙烯基#125。

Answer 2

对于索引文件，file.data.posts是表示单个帖子的Vinyl文件的数组。

如果这是真的，那么您的问题是以下两行：

while (file.data.posts > 0) {
  page = file.data.posts.splice(5);

在第一行中，您将数组本身的与0进行比较。您需要比较数组的length：

while (file.data.posts.length > 0) {

不过，这还不够。在第二行中，您使用一个参数调用Array.splice()。这将从file.data.posts中删除除前5个元素之外的所有内容，因此file.data.posts.length将永远停留在5.BOM。无限循环。

如果我对您的理解是正确的，那么您希望将数组划分为5组。

  page = file.data.posts.splice(0, 5);

这将把前5个帖子放到page中，并从file.data.posts中删除它们。