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

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

新規登録して質問してみよう
ただいま回答率
85.50%
Node.js

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

gulp

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

Q&A

解決済

1回答

2561閲覧

gulp-tapの動作について

aknm21

総合スコア7

Node.js

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

gulp

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

0グッド

0クリップ

投稿2017/08/25 02:11

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

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

javascript

1const fm = require('gulp-front-matter'); 2const gulp = require('gulp'); 3const tap = require('gulp-tap'); 4const matter = require('front-matter'); 5const wrapper = require('layout-wrapper'); 6 7const config = JSON.parse(fs.readFileSync('config.json')); 8 9gulp.src(['sources/**/*.md']) 10 .pipe(tap(function(file) { 11 const layoutPath = getPath(file, target); 12 13 gulp 14 .src(file.path) 15 .pipe(fm({ property: 'data' })) 16 .pipe( 17 wrapper({ 18 layout: layoutPath, 19 defaultLayout: '_layout', 20 data: { config }, 21 engine: 'ejs', 22 frontMatterProp: 'data' 23 }) 24 ) 25 .pipe(gulp.dest(dstPath)); 26 }) 27); 28

######動作確認

javascript

1// すべてのファイルが出力される 2gulp.src(['sources/**/*.md']) 3 .pipe(tap(function(file) { 4 console.log(file.path); 5 })) 6 .pipe(gulp.dest(dstPath)); 7 8// 一部しか出力されない 9gulp.src(['sources/**/*.md']) 10 .pipe(tap(function(file) { 11 console.log(file.path); 12 gulp.src(file.path) 13 .pipe(gulp.dest(dstPath)); 14 }))

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

Node version:
8.1.3

Platform:
Windows 7 Professional x64

npm version:
5.0.3

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

// 一部しか出力されない 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 03:15

kt3k

総合スコア87

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

aknm21

2017/08/25 03:37

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問