gulp-tapの動作について

Question

gulpでMarkdownをEJSテンプレートに入れてhtmlに変換しています。
外部の変数や自身のパスなどをテンプレートに渡すためgulp-tapを用いたいのですが、すべてのMarkdownファイルが変換されません。
原因がわからず困っております。

######やりたいこと

const fm = require('gulp-front-matter');
const gulp = require('gulp');
const tap = require('gulp-tap');
const matter = require('front-matter');
const wrapper = require('layout-wrapper');

const config = JSON.parse(fs.readFileSync('config.json'));

gulp.src(['sources/**/*.md'])
  .pipe(tap(function(file) {
    const layoutPath = getPath(file, target);
    
    gulp
      .src(file.path)
      .pipe(fm({ property: 'data' }))
      .pipe(
        wrapper({
          layout: layoutPath,
          defaultLayout: '_layout',
          data: { config },
          engine: 'ejs',
          frontMatterProp: 'data'
        })
      )
      .pipe(gulp.dest(dstPath));
    })
);

######動作確認

// すべてのファイルが出力される
gulp.src(['sources/**/*.md'])
  .pipe(tap(function(file) {
    console.log(file.path);
  }))
  .pipe(gulp.dest(dstPath));

// 一部しか出力されない
gulp.src(['sources/**/*.md'])
  .pipe(tap(function(file) {
    console.log(file.path);
    gulp.src(file.path)
      .pipe(gulp.dest(dstPath));
  }))

###補足情報(言語/FW/ツール等のバージョンなど)

Node version:
8.1.3

Platform:
Windows 7 Professional x64

npm version:
5.0.3

ご存知の方がいらっしゃいましたら、ご教示ください。お願いいたします。

Answer 1

// 一部しか出力されない
gulp.src(['sources/**/*.md'])
  .pipe(tap(function(file) {
    console.log(file.path);
    gulp.src(file.path)
      .pipe(gulp.dest(dstPath));
  }))

こちらのケースだと、 最初の stream (gulp.src(['sources/**/*.md']) から発生したもの) からみて .pipe(tap()) の後ろがないため、そこで stream が詰まっています。

gulp の stream には highWaterMark (満水線) というパラメータが設定されていて、それがデフォルトだと 16 になっています。なので、tap の部分で 16 個までファイルがバッファーされて、それ以降の分は溢れて処理されないため、途中で出力が止まっていると思われます。

上の書き方で全てのファイルを流すためには、下記のように through2.obj を使ってファイルをきちんと流すことで、全てのファイルを処理することができるはずと思います。

const through2 = require('through2');

gulp.src(['src/**/*.md'])
  .pipe(tap(function(file) {
    console.log(file.path);
    gulp.src(file.path)
      .pipe(gulp.dest('build'));
  }))
  .pipe(through2.obj((file, enc, cb) => cb()))

---

ちなみにですが、最初の例は以下のように layout1 という gulp プラグインを使うことで、gulp-tap を使わなくても、1つの stream で処理が出来るのではないかと思われます。ご参考までに

gulp.src(['sources/**/*.md'])
  .pipe(fm({ property: 'data' }))
  .pipe(layout1.ejs(file => {
    const layoutPath = getPath(file, target);
    const layoutPattern = file.data.layout || '_layout';
    return path.join(layoutPath, layoutPattern);
  }, { data: { config } }))
  .pipe(dstPath);

参考サイト: layout1 + gulp-front-matter + gulp-marked を使って gulp で静的サイトを構築する

Comments

[aknm21]

解決しました！
streamの理解の浅さがお恥ずかしい限りです、、
ご紹介いただいているlayout1も非常に興味深いのでぜひ検討したいと思います。
ありがとうございました。