How can I concatenate all JavaScript files generated from typescript in my Angular2 project with Gulp, and then add them to my index.html file?
I am using Angular2, typescript, and gulp, but currently, I am not concatenating the javascript files it generates from the typescript files.
I am struggling to achieve this and add them to my index.html file. Additionally, I need cache busting to ensure that browsers request the new javascript file.
This is a snippet of my index.html file:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My App</title>
<base href="/"></base>
<meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0, minimum-scale=0.5, user-scalable=yes"/>
<!-- Css libs -->
<link rel="stylesheet" type="text/css" href="/css/styles.css" />
<!-- inject:css -->
<!-- <link rel="stylesheet" href="/css/styles.81dd14d5.css"> -->
<!-- endinject -->
<!-- Js libs -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/es6-shim/0.34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.18.4/system.src.js"></script>
<script>
System.config({
transpiler: 'typescript',
defaultJSExtensions: true,
typescriptOptions: {
emitDecoratorMetadata: true,
},
packages: {
'angular2-google-maps': {
defaultExtension: 'js'
}
}
});
</script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/2.0.0-beta.0/http.js"></script>
<script type="text/javascript" src="/firebase/firebaseNew.js"></script>
</head>
<body id="container">
<app></app>
<script type="text/javascript">
System.import('/app/app.component.js');
</script>
</body>
</html>
This is part of my gulp configuration:
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. Generate 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 minified style.css");
}, 3000);
});
//3. Inject new style.css into 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']);
This is my attempt at concatenating the js with cache busting, which seems to work fine now. The challenge lies in linking the all.46f5af42.js file to the index.html?
Here's the corresponding gulp 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);
});
I have also successfully added the concatenated and cache busted js file to the index.html:
<!-- inject:js -->
<script src="/src/js/all.46f5af42.js"></script>
<!-- endinject -->
However, I am unsure how to integrate these changes to make everything work correctly?
This is the current state of my console output:
If anyone could assist me in implementing these modifications to my existing code, I would greatly appreciate it, as I prefer not to start over by downloading a new angular2 seed app and transferring my current application. Thank you in advance.