[英]how to output multiple bundles with browserify and gulp
I have browserify bundling up files and it's working great. 我有浏览器捆绑文件,它工作得很好。 But what if I need to generate multiple bundles?
但是,如果我需要生成多个捆绑包呢?
I would like to end up with dist/appBundle.js
and dist/publicBundle.js
我想以
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"));
});
Obviously this isn't going to work since I am only specifying one output (bundle.js). 显然这不会起作用,因为我只指定了一个输出(bundle.js)。 I can accomplish this by repeating the above statement like so (but it doesn't feel right, because of the repetition):
我可以通过重复上面这样的声明来实现这一点(但由于重复,它感觉不对):
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"));
});
Is there a better way to tackle this? 有没有更好的方法来解决这个问题? Thanks!
谢谢!
I don't have a good environment to test this in right now, but my guess is that it would look something like: 我现在没有一个好的环境来测试它,但我的猜测是它看起来像:
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));
});
EDIT: I just realized I mis-read the question, there should be two separate bundles coming from two separate .js files. 编辑:我刚刚意识到我错误地阅读了这个问题,应该有两个独立的捆绑包来自两个独立的.js文件。 In light of that, the best alternative I can think of looks like:
鉴于此,我能想到的最佳替代方案如下:
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"]);
});
I recently added support for multiple bundles with shared dependencies to https://github.com/greypants/gulp-starter 我最近添加了对具有共享依赖关系的多个bundle的支持到https://github.com/greypants/gulp-starter
Here's the array of browserify config objects I pass to my browserify task . 这是我传递给browserify任务的browserify 配置对象数组。 At the end of that task, I iterate over each config, browserifying all the things.
在该任务结束时,我遍历每个配置,浏览所有内容。
config.bundleConfigs.forEach(browserifyThis);
browserifyThis
takes a bundleConfig object, and runs browserify (with watchify if dev mode). browserifyThis
需要bundleConfig对象,并且运行browserify(与watchify如果dev的模式)。
This is the bit that sorts out shared dependencies : 这是排除共享依赖项的位:
// 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)
This browserify task also properly reports when all bundles are finished (the above example isn't returning streams or firing the task's callback), and uses watchify when in devMode for super fast recompiles. 这个browserify任务还可以正确地报告所有bundle的完成时间 (上面的例子没有返回流或触发任务的回调),并在devMode中使用 watchify进行超快速重新编译。
Brian FitzGerald's last comment is spot on. 布莱恩菲茨杰拉德的最后评论是现货。 Remember that it's just JavaScript!
请记住,它只是JavaScript!
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();
})
);
});
});
This is similar to @urban_racoons answer, but with some improvements: 这类似于@urban_racoons的答案,但有一些改进:
This answer is based on the premise of having a known list of entry files for each bundle, as opposed to, say, needing to glob a list of entry files. 这个答案基于为每个包提供一个已知的条目文件列表的前提,而不是需要对条目文件列表进行全局化。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.