How to use gulp to build JavaScript bundles?

Vote count:

0

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

For example I have the following structure in my project:

1. /js/includes/include1.js


2. /js/includes/include2.js


3. /js/foo.js


4. /js/bar.js


5. /vendor/baz/baz.js


6. /vendor/qux/qux.js

There are local includes (1-2), bundle files (3-4), and vendor includes (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/foo.js

(function() {

    // Vendor includes.
    include('baz.js');
    include('qux.js');

    // 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?

asked 25 secs ago

Slava Fomin II

561