0

Gulp を使用して静的サイトを作成しようとしています。以前のバージョンで書いた概念を翻訳し、それを Gulp を使用して実装する方法という興味深い問題にぶつかりました。

他のファイルを動的にインクルードするファイルがある場合の概念の 1 つです。

---
title: Table of Contents
include:
  key: book
  value: book-1
---

Introduction.

次に、他のファイルにそのキーがあります。

---
title: Chapter 1
book: book-1
---
It was a dark and stormy night...

... と：

---
title: Chapter 2
book: book-1
---

望ましい最終結果は次のとおりです。

---
title: Table of Contents
include:
  key: book
  value: book-1
  files:
    - path: chapters/chapter-01.markdown
      title: Chapter 1
      book: book-1
    - path: chapters/chapter-02.markdown
      title: Chapter 2
      book: book-1
---

基本的に、ファイルをスキャンし、data要素を一連の要素としてページに挿入します。含めるカテゴリやタグのすべてを事前に把握しているわけではないため (30 ～ 40 の Git リポジトリをマージしています)、カテゴリごとに 1 つのタスクを作成したくありません。

私が望んでいるのは次のようなものです：

return gulp.src("src/**/*.markdown")
  .pipe(magicHappens())
  .pipe(gulp.dest("build"));

問題は、ストリームがどのように機能するかのようです。各ファイルは 1 つのパイプから次のパイプへと渡されるため、2 つのメソッドを連鎖させることはできません。要素を挿入するinclude.filesには、すべての入力ファイル (サブディレクトリにもありません) を解析して、どのファイルが含まれているかを確認してから終了する必要があります。

「ストリームを分割」し、最初のものを解析してデータを取得し、2番目のものを最初のものの最後にチェーンし、2番目のものを使用してメソッドから結果を渡す必要があるようです。それを行う方法が完全にはわかりません。いくつかの指針や提案が欲しいです。私のグーグルフーは、私が再編成した良い提案やヒントさえも思いつきませんでした。ありがとうございました。

4

1 に答える 1

0

いろいろと悩んだ結果、以下のようになりました。

var through = require('through2');
var pumpify = require("pumpify");

module.exports = function(params)
{
    // Set up the scanner as an inner pipe that goes through the files and
    // loads the metadata into memory.
    var scanPipe = through.obj(
        function(file, encoding, callback)
        {
            console.log("SCAN: ", file.path);
            return callback(null, file);
        });

    // We have a second pipe that does the actual manipulation to the files
    // before emitting.
    var updatePipe = through.obj(
        {
            // We need a highWaterMark larger than the total files being processed
            // to ensure everything is read into memory first before writing it out.
            // There is no way to disable the buffer entirely, so we just give it
            // the highest integer value.
            highWaterMark: 2147483647
        },
        function(file, encoding, callback)
        {
            console.log("UPDATE: ", file.path);
            return callback(null, file);
        });

    // We have to cork() updatePipe. What this does is prevent updatePipe
    // from getting any data until it is uncork()ed, which we won't do, or
    // the scanPipe gets to the end.
    updatePipe.cork();

    // We have to combine all of these pipes into a single one because
    // gulp needs a single pipe  but we have to treat these all as a unit.
    return pumpify.obj(scanPipe, updatePipe);
}

コメントはかなり明確だと思いますが、2 つのパイプを ( を使用してpumpify) 1 つのパイプに結合corkし、最初のパイプが完了するまで 2 番目のストリームの処理を停止する必要がありました (これuncorkにより、2 番目のストリームが自動的に処理されます)。多数のファイルがあったため、最初のファイルが不足するのを避けるために、はるかに高いウォーターマークを使用する必要がありました。

于 2016-09-30T16:59:59.287 に答える