如何用browserify和gulp输出多个包

我浏览了捆绑文件，它工作得很好。 但是如果我需要生成多个捆绑包呢？

我想结束dist/appBundle.js和dist/publicBundle.js

 gulp.task("js", function(){ return browserify([ "./js/app.js", "./js/public.js" ]) .bundle() .pipe(source("bundle.js")) .pipe(gulp.dest("./dist")); }); 

显然这是不行的，因为我只指定一个输出（bundle.js）。 我可以通过重复上面的说法来完成这个工作（但是由于重复，这个说法并不正确）：

 gulp.task("js", function(){ browserify([ "./js/app.js" ]) .bundle() .pipe(source("appBundle.js")) .pipe(gulp.dest("./dist")); browserify([ "./js/public.js" ]) .bundle() .pipe(source("publicBundle.js")) .pipe(gulp.dest("./dist")); }); 

有没有更好的方法来解决这个问题？ 谢谢！

Answer 1

我现在没有一个好的环境来testing这个，但我的猜测是它看起来像这样：

 gulp.task("js", function(){ var destDir = "./dist"; return browserify([ "./js/app.js", "./js/public.js" ]) .bundle() .pipe(source("appBundle.js")) .pipe(gulp.dest(destDir)) .pipe(rename("publicBundle.js")) .pipe(gulp.dest(destDir)); }); 

编辑：我刚刚意识到我错读了这个问题，应该有两个单独的捆绑来自两个单独的.js文件。 鉴于此，我能想到的最佳select是：

 gulp.task("js", function(){ var destDir = "./dist"; var bundleThis = function(srcArray) { _.each(srcArray, function(source) { var bundle = browserify(["./js/" + source + ".js"]).bundle(); bundle.pipe(source(source + "Bundle.js")) .pipe(gulp.dest(destDir)); }); }; bundleThis(["app", "public"]); }); 

Answer 2

具有共享依赖关系的多个捆绑

我最近添加了对共享依赖的多个bundle的支持https://github.com/greypants/gulp-starter

以下是我传给我的browserify任务的browserify configuration对象数组。 在任务结束时，我遍历每个configuration，浏览所有的东西。

 config.bundleConfigs.forEach(browserifyThis); 

browserifyThis需要一个bundleConfig对象，并运行browserify（与watchify如果开发模式）。

这是sorting共享依赖关系的一点 ：

 // Sort out shared dependencies. // b.require exposes modules externally if(bundleConfig.require) b.require(bundleConfig.require) // b.external excludes modules from the bundle, and expects // they'll be available externally if(bundleConfig.external) b.external(bundleConfig.external) 

这个browserify任务也可以正确地报告所有bundle何时完成 （上面的例子没有返回stream或者触发任务的callback），并且在devMode中使用 watchify进行超快速重新编译。

布赖恩·菲茨杰拉德（Brian FitzGerald）的最后一条评论是现货 请记住，这只是JavaScript！

Answer 3

 gulp.task("js", function (done) { [ "app", "public", ].forEach(function (entry, i, entries) { // Count remaining bundling operations to track // when to call done(). Could alternatively use // merge-stream and return its output. entries.remaining = entries.remaining || entries.length; browserify('./js/' + entry + '.js') .bundle() // If you need to use gulp plugins after bundling then you can // pipe to vinyl-source-stream then gulp.dest() here instead .pipe( require('fs').createWriteStream('./dist/' + entry + 'Bundle.js') .on('finish', function () { if (! --entries.remaining) done(); }) ); }); }); 

这类似于@urban_racoons的答案，但有一些改进：

• 只要你想让这个任务成为另一个任务的依赖，那么这个回答就会失败，或者是一连串的一部分。这个回答使用callback来表示任务完成。
• JS可以更简单，不需要下划线。

这个答案是build立在为每个包提供一个已知的入口文件列表的前提下，而不是像需要整理一个入口文件列表。