Bundle multiple files with gulp and browserify

Question

I have a project structure that is something like that:

src
  |html
  |javascript
    |file_one.js
    |file_two.js
  |styles
dist
gulpfile.js

My question is: How can I bundle all files within the "javascript" folder into the root "dist" folder renaming the bundle files in the following way?

file_one.js ----> file_one.bundle.js file_two.js ----> file_two.bundle.js

I'm doing the following, but I can't put the bundle files into the root "dist" folder, and, I don't know if this is the most pretty way.

gulp.task("bundler", function(){
  var src_arr = ['src/javascript/file_one.js', 'src/javascript/file_two.js'];
  src_arr.forEach(function(file) {
    var bundle = browserify([file]).bundle();
    bundle.pipe(source(file.substring(0,file.indexOf('.')) + ".bundle.js"))
      .pipe(gulp.dest('dist/'));
  });
});

Any help will be appreciated. Thanks

score 0 · Answer 1 · edited May 23 '17 at 12:22

I guess this is more a long comment than an "answer"…

Various ways to deal with multiple browserify entry points is covered well in Browserify - multiple entry points and in @Hafiz Ismail's https://wehavefaces.net/gulp-browserify-the-gulp-y-way-bb359b3f9623.

Since you're dealing with two know files rather than a glob, the gulpiest solution might be to set up a browserifying lazypipe (https://github.com/OverZealous/lazypipe), and call that from two separate tasks - one would be

gulp.task('first', function(){
    gulp.src('src/javascript/file_one.js')
        .pipe(browserifyingLazypipe())
};

(I freely admit that I haven't tried using browserify in a lazypipe)

A gulpy way to do the renaming is use gulp-rename

.pipe(rename({
    extname: '.bundle.js'
})

Bundle multiple files with gulp and browserify

1 Answers1