How do I uglify my AngularJS 2 Typescript app files and wire up for a production release using Gulp
<p><strong>How do I uglify my AngularJS 2 Typescript app files and wire up for a production release using Gulp?</strong></p>

<p>I can uglify the js files but then I have no idea how to use them / wire it up.
Currently my code below just cache busts the css and injects it to the index file head.</p>

<p>I used typescript for my angular 2 app and I noticed that when I viewed my website in chrome I could see all the source files for all the .ts and .js code that I have done.</p>

<p>I'm looking to uglify that and make it more secure.</p>

<p>I could do this in angular 1 but in angular 2 I have no idea how to do this.</p>

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

<p><strong>This is my current index file:</strong></p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;title&gt;Pool Cover Dev&lt;/title&gt;
    &lt;base href="/"&gt;&lt;/base&gt;

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

    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"&gt;&lt;/script&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 current 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/')) 

    }, 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});

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

    }, 5000); 

});

//4. Get all js files into folder js
gulp.task('getAllJsFiles', function() {

    setTimeout(function () {

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

    }, 8000); 

});

gulp.task('default', ['deleteStyle', 'addStyles', 'injectStyle', 'getAllJsFiles']);
</code></pre>