Bests practice for Browserify in large web projects - Gulp

Question

Here is the thing,

I come from a world where you have several js files included to a web page. Some are always included in the page (your libs, menu etc...) and others are depending on the current page (js for login page, js for subscription etc...). Basically let's say that I have 1 different js file per page plus the libs.

Now I want to start a new project with browserify and I am in front of a big problem :

• In all the examples I have seen, there is always a single entry point (like app.js).
• In my case I would have n entry points (1 per page).

So my questions are:

• Is it against good practices to have 1 entry point per page ? Why ?
  • If Yes, What is the good practice for browserifying a large app with lot of page-specific JS ?
  • If No, How to automate that with Gulp. In every examples I found. You have to know the name of every files and process it one after another. (Which is very annoying in a large project with hundreds of pages for example)
• How are you dealing with this in your projects ? Do I have to completely rethink my way to deal with page-specific JS code ?

Answer 1

It depends on your particular case. Browserify is often used for single page apps where a single bundle is often the best solution. You are using it in a non single-page application.

I see two choices:

1. Bundle everything together. If you have a relatively small app, this will be the easiest and maybe most efficient solution (because of browser caching). Just include all your page specific modules along with your other ones.

2. Create separate bundles. You could create a bundle for each page, or a bundle for groups of related pages. Browserify will create a separate file for each bundle and you can include them independently on each page.

<script src="common-bundle.js"></script>
<script src="bundle-for-this-page.js"></script>

You will still be able to use require() across modules.

You could separate each page's javascript into a separate directory and use that to automate gulp. With gulp it could look something like:

var pageDirs = ['page1', 'page2'];

pageDirs.forEach(function(pageDir) {
    gulp.task('browserify-' + pageDir, function() {
        gulp.src(pageDir + '/index.js')
            .pipe(browserify())
            .on('prebundle', function(bundle) {
                bundle.external('./common-bundle');
            })
            .pipe(gulp.dest('./build/' + pageDir))
    });
});

gulp.task('browserify-all', pageDirs.map(function(pageDir) {
    return 'browserify-' + pageDir;
});

Create a separate task for browserifying your common bundle.

Answer 2

Thanks for your Answer. It get me on track. After a lot of other research, I found the exact script I needet to browserify multiple entry points files whithout havin to call it manually on every of them:

var gulp = require('gulp');
var gutil = require('gulp-util');
var browserify = require('browserify');
var transform = require('vinyl-transform');

// BROWSERIFY
gulp.task('browserify', function(){
    var browserified = transform(function(filename) {
        var b = browserify(filename);
        b.transform(reactify);
        return b.bundle();
    });

    return gulp.src(JS_SRC)
        .pipe(browserified)
        //.pipe(uglify())
        .pipe(gulp.dest(JS_DEST))
        .pipe(notify({message: 'Browserify task completed.'}));
});

This script takes every js file in the JS_SRC dir and assume it's a browserify entry point.

This worked fine for me.