How to use gulp to build JavaScript bundles?

Question

I want to use gulp to build bundles of JavaScript files.

For example I have the following structure in my project:

1. /vendor/vendor1/vendor1.js
2. /vendor/vendor2/vendor2.js
3. /js/includes/include1.js
4. /js/includes/include2.js
5. /js/bundle1.js
6. /js/bundle2.js

There are vendor includes (1-2), local includes (3-4), and bundle files (5-6).

Vendor includes are just third-party JavaScript libraries installed with bower or composer. They can be CommonJS, AMD or just a plain-old jQuery plugins.

I want to specify dependencies inside of a bundle files like this:

/js/bundle1.js

(function() {

    // Vendor includes.
    include('vendor1');
    include('vendor2');

    // Local includes.
    include('includes/include1.js');
    include('includes/include2.js');

    // Some code here.

})();

I want gulp to process this source file and create a final distribution file (bundle) ensuring that all dependencies (includes) are merged together in a single file. So I can include foo.js from my HTML and all dependencies will be available to it.

I want to have a clear and robust system to manage all dependencies inside of a project and build distribution files.

• How can I achieve this?
• What format should I use for my own scripts (AMD, CommonJS, other)?
• How do I specify dependencies in my source bundle files?
• How do I build distribution?

Solution 1

Your question is posed as if there's a single answer, but there isn't. The problem you're trying to solve is one that many people have solved in many different ways, and you've identified two of the major options: AMD and CommonJS. There are other ways, but given that you might be new to Javascript dependency management as well as gulp, I'd recommend going with something that's relatively straightforward (even though this subject is inherently not straightforward).

I think the easiest route for you might be:

• use CommonJS to express the dependencies
• use browserify to resolve them into bundles
• in browserify, use the "UMD" method so that you get a single bundle that will work for apps that use either AMD or CommonJS or are not using either of these dependency management systems

The statement in gulp to run browserify as such might look something like:

var browserify = require('gulp-browserify');
gulp.src('bundles/bundle1.js', {read: false})
  .pipe(browserify({
    'standalone': true
  })
  .pipe(rename('bundle1Output.js'))
  .pipe(gulp.dest('dist'));

That should give you a dist/bundle1Output.js file.

Solution 2

There is a gulp plugin for this:

https://www.npmjs.com/package/gulp-include

It should do what you want, except that in your bundle file instead of this:

    (function() {

        // Vendor includes.
        include('vendor1');
        include('vendor2');

        // Local includes.
        include('includes/include1.js');
        include('includes/include2.js');

        // Some code here.

    })();

You would have to write:

    //=require vendor1/**/*.js
    //=require vendor2/**/*.js

    //=require includes/include1.js
    //=require includes/include2.js

    // Some code here

Comments

[Slava Fomin II]

Thank you for your answer! Could you provide example of bundle.js that can be used with this configuration?

[daphne-d]

Browserify will expect your bundle1.js file to specify your dependencies. That's covered here.