Question

当我通过流进行管道传输时，如何访问添加到Gulp乙烯基文件对象的属性？

万一我问错了问题，这就是我的理由。

我正在使用Gulp 4，并且想使用gulp-front-matter从文件顶部提取yaml数据，然后进一步将其发送到类似pug的html模板包中。根据gfm文档...

“从文件中提取YAML Front-Matter标头，将其从contents中删除，并向文件对象添加新的frontMatter属性。”

我了解到Gulp使用的Vinyl file objects具有options.contents属性，并且可以添加任何options.{custom}属性。我至少如何访问乙烯基文件对象，以最终将添加的frontMatter属性通过管道传输到pug中？

我最大的尝试就是这个...

return src('file.md')
    .pipe(frontMatter())
    .pipe(gulpPug({ /* vinyl.options.frontMatter */ }));

编辑：目前，我正在尝试编写自己的转换流，该流将访问乙烯基对象的自定义属性并将其通过管道传递到gulp-pug中。

Answer 1

我已经做到了。

考虑到原始数据流以gulp-front-matter推送修改的乙烯基文件对象结束，我可以通过添加自己的读取输入的乙烯基对象的转换流来访问新的yaml属性。我所包含的示例没有任何Gulp 4任务实现，它只需运行node index.js即可工作。

const { Transform } = require('stream');
const { src, dest } = require('gulp');
const Vinyl = require('vinyl');
const frontMatter = require('gulp-front-matter');
const streamToArray = require('stream-to-array');    

function fmData() { 
    return (
        new Transform({
            readableObjectMode: true,
            writableObjectMode: true,
            transform(chunk, encoding, callback) {
                if (Vinyl.isVinyl(chunk)) {
                    this.push(chunk.frontMatter);
                }
                callback();
            }
        })
    )
}

streamToArray(
    src('file.md')
        .pipe(frontMatter())
        .pipe(fmData())
).then(array => {
    console.log(array);
});

其中包括npm package.json样式依赖项。

"dependencies": {
    "gulp": "^4.0.0",
    "gulp-front-matter": "^1.3.0",
    "stream-to-array": "^2.3.0",
    "vinyl": "^2.2.0"
  }

实际上，乙烯基文件对象正在等待读取，尽管这样做需要在流管道中完成。我观看了2013 talk at MNUG，读了free code camp tutorial，并查看了node stream documentation以完成此操作。

Gulp：访问添加的乙烯基属性

1 个答案: