質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.48%

  • Node.js

    2419questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • gulp

    339questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。

gulp-tapの動作について

解決済

回答 1

投稿

  • 評価
  • クリップ 0
  • VIEW 725

aknm21

score 1

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

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

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+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 で静的サイトを構築する

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/25 12:37

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

    キャンセル

同じタグがついた質問を見る

  • Node.js

    2419questions

    Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

  • gulp

    339questions

    gulpは、Node.jsをベースとしたタスク自動化ツールの一つ。ストリームでファイルを処理することが特徴です。CSSプリプロセッサの使用時のコンパイルや、CSS・JavaScriptファイルの圧縮・結合などを自動的に行うことができます。