title: How to use gulp to build JavaScript bundles?
body: <p>I want to use <a href="http://gulpjs.com/" rel="nofollow">gulp</a> to build bundles of JavaScript files.</p>
  
  <p>For example I have the following structure in my project:</p>
  
  <ol>
  <li>/vendor/vendor1/vendor1.js</li>
  <li>/vendor/vendor2/vendor2.js</li>
  <li>/js/includes/include1.js</li>
  <li>/js/includes/include2.js</li>
  <li><strong>/js/bundle1.js</strong></li>
  <li><strong>/js/bundle2.js</strong></li>
  </ol>
  
  <p>There are vendor includes (1-2), local includes (3-4), and bundle files (5-6).</p>
  
  <p>Vendor includes are just third-party JavaScript libraries installed with <a href="https://github.com/bower/bower" rel="nofollow">bower</a> or <a href="https://getcomposer.org/" rel="nofollow">composer</a>. They can be <em>CommonJS</em>, <em>AMD</em> or just a plain-old jQuery plugins.</p>
  
  <p>I want to specify dependencies inside of a bundle files like this:</p>
  
  <h3>/js/bundle1.js</h3>
  
  <pre><code>(function() {
  
      // Vendor includes.
      include('vendor1');
      include('vendor2');
  
      // Local includes.
      include('includes/include1.js');
      include('includes/include2.js');
  
      // Some code here.
  
  })();
  </code></pre>
  
  <p>I want <a href="http://gulpjs.com/" rel="nofollow">gulp</a> 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 <strong>foo.js</strong> from my HTML and all dependencies will be available to it.</p>
  
  <p>I want to have a clear and robust system to manage all dependencies inside of a project and build distribution files.</p>
  
  <ul>
  <li>How can I achieve this?</li>
  <li>What format should I use for my own scripts (AMD, CommonJS, other)?</li>
  <li>How do I specify dependencies in my source bundle files?</li>
  <li>How do I build distribution?</li>
  </ul>