꿀꺽 번들 + 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")) 
}); 

는 여러 번들을 넣을 수있을 것인지 궁금 해서요 이 멍청이에서? 내 이상적인 결과는 할 수있는 것 :

• main.jsx이 otherPage2에 otherPage.js

• otherPage2.jsx에

• otherPage.jsx을 main.js 할 수 있습니다. js

모두 하나의 꿀꺽 거리기 작업입니다.

나는 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")) 
    })); 
}); 

을 위의 필요 수동으로 파일 목록을 배열로 유지한다는 것입니다. 파일의 명시적인 배열을 유지할 필요없이 파일을 번들로 묶어 app 디렉토리에있는 작업을 작성하는 것도 가능합니다. 파일 배열을 결정하기 위해 glob 패키지가 필요합니다.

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")) 
    })); 
});