Question

136

how to output multiple bundles with browserify and gulp

rated 0 times [ 137] [ 1] / answers: 1 / hits: 17202 / 10 Years ago, fri, may 23, 2014, 12:00:00

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

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). 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!

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jadyngraysons

Add To Favorites

Follow

Total Points: 455

Total Questions: 109

Total Answers: 98

Location: Trinidad and Tobago

Member since Fri, May 8, 2020

4 Years ago

jadyngraysons questions

1 AWS Lambda SNS Destinations not working on failure or success

Fri, Aug 14, 20, 00:00, 4 Years ago

1 React Hooks useState Array empty with states rendered in the component

Tue, May 5, 20, 00:00, 4 Years ago

1 postman pm set environment variable

Thu, Apr 23, 20, 00:00, 4 Years ago

1 getElementById after dynamically adding it in React

Sat, Jan 18, 20, 00:00, 4 Years ago

1 How to customise Intl.DateTimeFormat date?

Tue, Dec 31, 19, 00:00, 5 Years ago

View All

answered 10 Years ago piper · Accepted Answer

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

});