时间戳

首页 > 解决方案 > Gulp：访问添加的乙烯基属性

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

问题描述

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

如果我问错了问题，这是我的推理。

我正在使用 Gulp 4，并希望使用gulp-front-matter从文件顶部提取 yaml 数据，然后在流的下游将其发送到像pug这样的 html 模板包中。根据 gfm 文档...

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

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

我最好的尝试是这个......

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

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

标签： javascriptnode.jsstreamgulp

解决方案

我已经做了。

鉴于原始流以 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);
});

包括 npmpackage.json样式依赖项。 

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

说实话，乙烯基文件对象正在等待读取，尽管这样做需要在流管道中完成。我在 MNUG 观看了 2013 年的演讲，阅读了免费的代码营教程，并查看了节点流文档以完成此操作。

推荐阅读