For Angular2 project, In gulp how do I concat all my JavaScript files that were generated from typescript and add them to my index.html file
<p>For Angular2 project, In gulp how do I concat all my JavaScript files that were generated from typescript and add them to my index.html file.</p>

<p>I'm using Angular2, typescript and gulp.</p>

<p>Currently I'm not concatenating the javascript files it generates from the typescript files.</p>

<p>I'm having trouble trying to do this and add them to my index.html file.</p>

<p>In addtion once I've done this I need cache busting in order to get the browsers to keep request the javascript file.</p>

<p><strong>This is my index.html file:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
    &lt;title&gt;My App&lt;/title&gt;
    &lt;base href="/"&gt;&lt;/base&gt;
    &lt;meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/&gt;

    &lt;!-- Css libs --&gt;
    &lt;link rel="stylesheet" type="text/css" href="/css/styles.css" /&gt; 

    &lt;!-- inject:css --&gt;    
       &lt;!-- &lt;link rel="stylesheet" href="/css/styles.81dd14d5.css"&gt;     --&gt;
    &lt;!-- endinject --&gt;

    &lt;!-- Js libs --&gt;    
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"&gt;&lt;/script&gt;    
    &lt;script type="text/javascript" src="/safariPolyFix.js"&gt;&lt;/script&gt;    
    &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"&gt;&lt;/script&gt;   

    &lt;script&gt;
        System.config({
            transpiler: 'typescript',
            defaultJSExtensions: true,  
            typescriptOptions: {
                emitDecoratorMetadata: true,
            },          
            packages: {
                'angular2-google-maps': {
                  defaultExtension: 'js'
                }
            }
        });       
    &lt;/script&gt;

    &lt;script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"&gt;&lt;/script&gt;

    &lt;script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"&gt;&lt;/script&gt;  

    &lt;script type="text/javascript" src="/firebase/firebaseNew.js"&gt;&lt;/script&gt;   
  &lt;/head&gt;

  &lt;body id="container"&gt;

    &lt;app&gt;&lt;/app&gt;

    &lt;script type="text/javascript"&gt;  
      System.import('/app/app.component.js');
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<p><strong>This is my gulp file:</strong></p>

<pre><code>var gulp = require('gulp');
var sass = require('gulp-sass');
var inject = require('gulp-inject');
var del = require('delete');
var minifyCss = require('gulp-minify-css');
var uglify = require('gulp-uglify');

var CacheBuster = require('gulp-cachebust');
var cachebust = new CacheBuster();

//1. Delete styles.css
gulp.task('deleteStyle', function() {

    setTimeout(function () {
        del.promise(['src/css/styles.*.css'])
          .then(function() {            
                console.log("Deleted original styles.css");         
                return true;
          });      
    }, 1000);  

});

//2. Make new styles.css
gulp.task('addStyles', function() {

    setTimeout(function () {

        gulp.src('src/sass/styles.scss')
            .pipe(sass().on('error', sass.logError))
            .pipe(minifyCss({compatibility: 'ie8'}))
            .pipe(cachebust.resources())
            .pipe(gulp.dest('src/css/'))

        console.log("Added and minifyCss style.css");     

    }, 3000); 

});

//3. Inject new style.css to index.html file
gulp.task('injectStyle', function() {

    setTimeout(function () {
          var target = gulp.src('src/index.html');
          var sources = gulp.src(['src/css/styles.*.css'], {read: false});

          console.log("Injected stylesheet to index.html file");

          return target.pipe(inject(sources))
            .pipe(gulp.dest('./src'));

    }, 5000); 

});

//Use for product release.
gulp.task('default', ['deleteStyle', 'addStyles', 'injectStyle']);
</code></pre>

<p>This is my current attempt at concat the js with cache busting, which works fine now. I just dont know how to wire up this <strong>all.46f5af42.js</strong> file to the index.html?</p>

<p><strong>Here's the gulp code for this:</strong></p>

<pre><code>gulp.task('getAllJsFiles', function() {

    setTimeout(function () {

        gulp.src('src/app/**/**/*.js')
            .pipe(concat('all.js'))
            .pipe(cachebust.resources())
            .pipe(gulp.dest('src/js'));

    }, 8000); 

});
</code></pre>

<p>I've also managed to get that concat js and cache busted js file into the index.html:</p>

<pre><code>&lt;!-- inject:js --&gt;
&lt;script src="/src/js/all.46f5af42.js"&gt;&lt;/script&gt;
&lt;!-- endinject --&gt;
</code></pre>

<p>I'm not sure how to wire this up though to get it working?</p>

<p><strong>This is my current console:</strong></p>

<p><a href="https://i.stack.imgur.com/zT3AJ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/zT3AJ.png" alt="enter image description here"></a></p>

<p>If someone could help me add the changes to my existing code that would be great, as I dont want to download the new angular2 seed app as it would take me ages moving my app across.</p>

<p>Thank you in advance.</p>