如何使用browserify和gulp输出多个包

Bri*_*ald 31 javascript node.js npm browserify gulp

我有浏览器捆绑文件,它工作得很好.但是,如果我需要生成多个捆绑包呢?

我想最终dist/appBundle.jsdist/publicBundle.js

gulp.task("js", function(){

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

});
Run Code Online (Sandbox Code Playgroud)

显然这不会起作用,因为我只指定了一个输出(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"));

});
Run Code Online (Sandbox Code Playgroud)

有没有更好的方法来解决这个问题?谢谢!

urb*_*ons 23

我现在没有一个好的环境来测试它,但我的猜测是它看起来像:

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

});
Run Code Online (Sandbox Code Playgroud)

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

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"]);
});
Run Code Online (Sandbox Code Playgroud)