問(wèn)題描述

我有 browserify 捆綁文件，它工作得很好.但是如果我需要生成多個(gè)捆綁包怎么辦?

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

});

顯然這行不通，因?yàn)槲抑恢付艘粋€(gè)輸出 (bundle.js).我可以通過(guò)像這樣重復(fù)上述語(yǔ)句來(lái)實(shí)現(xiàn)這一點(diǎn)(但感覺(jué)不對(duì)，因?yàn)橹貜?fù)):

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

});

有沒(méi)有更好的方法來(lái)解決這個(gè)問(wèn)題?謝謝！

Is there a better way to tackle this? Thanks!

推薦答案

我現(xiàn)在沒(méi)有一個(gè)好的環(huán)境來(lái)測(cè)試這個(gè)，但我猜它看起來(lái)像:

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

});

我剛剛意識(shí)到我誤讀了這個(gè)問(wèn)題，應(yīng)該有兩個(gè)單獨(dú)的包來(lái)自?xún)蓚€(gè)單獨(dú)的 .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"]);
});

這篇關(guān)于如何使用 browserify 和 gulp 輸出多個(gè)包的文章就介紹到這了，希望我們推薦的答案對(duì)大家有所幫助，也希望大家多多支持html5模板網(wǎng)！