ガルプバンドル+ Browserify

Question

だから私は現在、main.jsファイルに私のmain.jsxを変換asimple一気タスク機能を持っている：

gulp.task("bundle", function() { 
    return browserify({ 
     entries: "./app/main.jsx", 
     debug: true 
    }).transform(reactify) 
     .bundle() 
     .pipe(source("main.js")) 
     .pipe(gulp.dest("app/dist")) 
}); 

複数のバンドルを配置することが可能である場合、私は思っていましたこのgulp.taskでは？ 私の理想的な結果が行うことができるということになります。otherPage.js

otherPage2にotherPage2.jsxに

otherPage.jsxをmain.jsする

• main.jsx。 js

すべての1つのgulpタスクですべて。

私はonliineを検索しましたが、関連するものは見つかりませんでした。何か助けや助言をいただければ幸いです。ありがとうございます。

Answer 1

あなたは（merge-streamを使用して）、その後の流れを、あなたはそれぞれのファイルをループに必要な各ファイルのバンドルを作成し、各ファイルのストリームを作成し、マージしたい場合：

var merge = require('merge-stream'); 

gulp.task("bundle", function() { 
    var files = [ "main", "otherPage", "otherPage2" ]; 
    return merge(files.map(function(file) { 
    return browserify({ 
     entries: "./app/" + file + ".jsx", 
     debug: true 
    }).transform(reactify) 
     .bundle() 
     .pipe(source(file + ".js")) 
     .pipe(gulp.dest("app/dist")) 
    })); 
}); 

を上記必要ですファイルのリストを手作業で配列として管理しています。 ディレクトリにすべての.jsx個のファイルをバンドルするタスクを記述することもできます。このタスクでは、ファイルの明示的な配列を維持する必要はありません。

var merge = require('merge-stream'); 
var glob = require('glob'); 
var path = require('path'); 

gulp.task("bundle", function() { 
    var files = glob.sync('./app/*.jsx'); 
    return merge(files.map(function(file) { 
    return browserify({ 
     entries: file, 
     debug: true 
    }).transform(reactify) 
     .bundle() 
     .pipe(source(path.basename(file, '.jsx') + ".js")) 
     .pipe(gulp.dest("app/dist")) 
    })); 
});