如何使用browserify和gulp输出多个包 [英] how to output multiple bundles with browserify and gulp

问题描述

我已经用browserify捆绑了文件，并且效果很好.但是，如果我需要生成多个捆绑包怎么办?

I have browserify bundling up files and it's working great. But what if I need to generate multiple bundles?

我想以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).我可以这样重复上面的语句来完成此操作(但是由于重复，它感觉不正确):

Obviously this isn't going to work since I am only specifying one output (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));

});

我刚刚意识到我读错了这个问题，应该有两个来自两个单独的.js文件的单独的捆绑包.有鉴于此，我能想到的最佳替代方案如下:

I just realized I mis-read the question, there should be two separate bundles coming from two separate .js files. 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"]);
});

这篇关于如何使用browserify和gulp输出多个包的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！