Gulpタスク：ループ内のストリーム

Question

someFolder内のすべてのファイルを読み取ってから、gulp-inject-stringという固定ファイルにこれらのファイルを挿入することは、この質問の無関係な基準を使用して行います。

私が持っているもののいくつかの擬似コード：

var gulp = require('gulp'); 
 
var inject = require('gulp-inject-string'); 
 
var fs = require("fs"); 
 

 
gulp.task('compile', function() { 
 
    
 
\t /* reading the file names in the directory */ 
 
\t var fileNames = fs.readdirSync('someFolder', 'utf8'); 
 
\t fileNames.forEach(function(fileName) { 
 
     
 
\t \t /* getting the whole file content and then removing what 
 
\t \t I don't want to be injected with a regex */ 
 
\t \t var wholeFile = fs.readFileSync('someFolder/' + fileName, 'utf8'); 
 
\t \t var file = wholeFile.replace(/<!-- COMMENT-WITH-SOME-FIXED-STRING:. * -->[\r\n]/g, ''); 
 
     
 
\t \t /* now getting into mainFile to inject this file */ 
 
\t \t gulp.src('mainFolder/mainFile.html') 
 
     
 
\t \t /* injecting the content after it has been processed by the regex exactly where I need it 
 
\t \t (which depends on the fileName I got earlier) */ 
 
\t \t .pipe(inject.afterEach('<!-- COMMENT-WITH-SOME-FIXED-STRING+FILENAME: ' + fileName + ' -->', file)) 
 
\t \t .pipe(gulp.dest('mainFolder')); 
 
     
 
\t }); 
 
});

私だけsomeFolder内の1つのファイルがある場合、これは正常に動作しますが、それ以外の場合は、最後の読み取りファイルを挿入します。私はJavaScriptでの非同期操作で数回行われたが、全く同じ結果を持っていたとして

for(var i...){ (function(i){ /* stream stuff here*/ })(i) }：

私のような何かをしてループするための共通の内側に無名関数にストリームを吸収しようとしました。

merge-stream私はまた、fileNames以上の関数をマッピングして、ストリーム自体を返してからマージを適用してみましたが、同じ結果を再度使用してみました。

ストリームを処理しようとして間違っていますか？

Answer 1

はここで働く何か。私は別のフォルダ（destFolder）に出力を送信しています。なぜなら、入力を変更するgulpfileを絶対に嫌うからです。このようなgulpfileのデバッグは非常に困難です。

キーは以下のとおりです。

1. はあなたの仕事が終わったとき、それは知っているので、がぶ飲みするために何かを返す必要があります。それ以外の場合は、タスクが終了する前にが終了することがあります。

2. ストリーム上のすべてのアクションを連鎖した結果を返す必要があります。

3. 通常、複数のストリームを1つのストリームに含めることはできますが、この場合は1つしか使用しないでください。部分的な結果しか得られません。

以下の入力があるとします。 gulp compileを実行

$ cat mainFolder/mainFile.html 
<!-- include: a --> 
Other stuff. 
<!-- include: b --> 
Other stuff. 
<!-- include: a --> 
Other stuff. 
<!-- include: b --> 

$ cat someFolder/a 
File a's contents. 

$ cat someFolder/b 
File b's contents. 

は生成します。

$ cat destFolder/mainFile.html 
<!-- include: a -->File a's contents. 

Other stuff. 
<!-- include: b -->File b's contents. 

Other stuff. 
<!-- include: a -->File a's contents. 

Other stuff. 
<!-- include: b -->File b's contents. 

Answer 2

ディレクトリとファイルにfsを使用する代わりに、gulp.srcを作成して、各ファイルをプライマリファイルに挿入することができます。それはあなたの失敗を引き起こしていたものではありません、追加するのは簡単ですので、私はmainFolder/mainFile.html上のテキスト置換を行っていませんでした

var gulp = require('gulp'); 
var inject = require('gulp-inject-string'); 
var fs = require("fs"); 

gulp.task('compile', function() { 
    /* reading the file names in the directory */ 
    var fileNames = fs.readdirSync('someFolder', 'utf8'); 
    var stream = gulp.src('mainFolder/mainFile.html'); 
    fileNames.forEach(function(fileName) { 
     var file = fs.readFileSync('someFolder/' + fileName, 'utf8'); 

     stream = stream.pipe(inject.afterEach('<!-- include: ' + 
               fileName + ' -->', file)); 

    }); 
    return stream.pipe(gulp.dest('destFolder')); 
}); 

：

gulp.src('someFolder/*.*') // or a specific file type 
    .pipe(inject.afterEach('someCriteriaInTheMainFile', file)) 
    .pipe(gulp.dest('mainFileFolderContainer'));