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.
I'm using Angular2, typescript and gulp.
Currently I'm not concatenating the javascript files it generates from the typescript files.
I'm having trouble trying to do this and add them to my index.html file.
In addtion once I've done this I need cache busting in order to get the browsers to keep request the javascript file.
This is my index.html file:
<!DOCTYPE html>
<html lang="en" prefix="og: " xml:lang="en" xmlns="">
<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=".34.2/es6-shim.min.js"></script>
<script type="text/javascript" src="/safariPolyFix.js"></script>
<script type="text/javascript" src=".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=".0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src=".js"></script>
<script type="text/javascript" src=".0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src=".0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src=".0.0-beta.0/router.js"></script>
<script type="text/javascript" src=".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/appponent.js');
</script>
</body>
</html>
This is my gulp file:
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({patibility: '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']);
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 all.46f5af42.js file to the index.html?
Here's the gulp code for this:
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've also managed to get that concat js and cache busted js file into the index.html:
<!-- inject:js -->
<script src="/src/js/all.46f5af42.js"></script>
<!-- endinject -->
I'm not sure how to wire this up though to get it working?
This is my current console:
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.
Thank you in advance.
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.
I'm using Angular2, typescript and gulp.
Currently I'm not concatenating the javascript files it generates from the typescript files.
I'm having trouble trying to do this and add them to my index.html file.
In addtion once I've done this I need cache busting in order to get the browsers to keep request the javascript file.
This is my index.html file:
<!DOCTYPE html>
<html lang="en" prefix="og: http://ogp.me/ns#" xml:lang="en" xmlns="http://www.w3/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./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./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/2.0.0-beta.0/angular2-polyfills.js"></script>
<script type="text/javascript" src="https://code.angularjs/tools/typescript.js"></script>
<script type="text/javascript" src="https://code.angularjs/2.0.0-beta.0/Rx.js"></script>
<script type="text/javascript" src="https://code.angularjs/2.0.0-beta.0/angular2.js"></script>
<script type="text/javascript" src="https://code.angularjs/2.0.0-beta.0/router.js"></script>
<script type="text/javascript" src="https://code.angularjs/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.ponent.js');
</script>
</body>
</html>
This is my gulp file:
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({patibility: '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']);
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 all.46f5af42.js file to the index.html?
Here's the gulp code for this:
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've also managed to get that concat js and cache busted js file into the index.html:
<!-- inject:js -->
<script src="/src/js/all.46f5af42.js"></script>
<!-- endinject -->
I'm not sure how to wire this up though to get it working?
This is my current console:
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.
Thank you in advance.
Share Improve this question edited Apr 24, 2016 at 15:56 QoP 28.4k16 gold badges77 silver badges76 bronze badges asked Apr 24, 2016 at 10:30 AngularMAngularM 16.6k29 gold badges104 silver badges175 bronze badges 5- Currently I just get a blank screen and no console errors or gulp errors. Seems like I just need to wire the js file up correctly now – AngularM Commented Apr 24, 2016 at 10:52
- You don't need to concat the .js files, check the index.html on network tab and you will see that system.js already concat all the .js files and includes only 1 file into the browser. If you want to do something different with that file cache/minify probably you need too look into system.js – Tiberiu Popescu Commented Apr 24, 2016 at 12:58
- I just had a look and its not concat the js files its loading them individually – AngularM Commented Apr 24, 2016 at 13:08
- Do you have any good examples of the concat using system.js and then cashe busting that js file? – AngularM Commented Apr 24, 2016 at 13:12
- Ignore me, that's right sorry. I was not looking in the right place, yes it loads all the files. – Tiberiu Popescu Commented Apr 24, 2016 at 13:20
2 Answers
Reset to default 4 +50In fact, you can't concat them like this because by default they correspond to anonymous modules. You need to leverage the outFile to leverage this. This way, all modules will be piled into a single JS file and they won't be anonymous modules but registered by names.
Here is a sample. Have a look at the first parameter of the System.register function.
Anonymous modules
System.register([ 'dep1', 'dep2', function(exports_1, context_1) { (...) }Modules registered by names
System.register('module1', [ 'dep1', 'dep2', function(exports_1, context_1) { (...) } System.register('module2', [ 'dep1', 'dep2', function(exports_1, context_1) { (...) }
Here is a sample of use within a gulp file:
gulp.task('app-bundle', function () {
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
var tsResult = gulp.src('app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Finally you could use htmlreplace to update the script elements with created JS files. Here is sample:
gulp.task('html', function() {
gulp.src('index.html')
.pipe(htmlreplace({
'vendor': 'vendors.min.js',
'app': 'app.min.js',
'boot': 'boot.min.js'
}))
.pipe(gulp.dest('dist'));
});
This question could help you:
- How do I actually deploy an Angular 2 + Typescript + systemjs app?
You can set the outFile option in your tsconfig.json in order TypeScript to concatenate and emit output to a single file and then reference that file in your index.html.
In the gulpfile.js:
function buildApp() {
return gulp.src('./app/app.ts')
.pipe(tsc({
typescript: require('typescript'), // In my package.json I have "typescript": "~1.8.0-dev.20151128"
target: 'ES5',
module: 'system',
experimentalDecorators: true,
emitDecoratorMetadata: true
outFile: 'app.js'
}))
// Here in my pipe I only have app.js
.pipe(gulp.dest('./dist'));
}
And in your index.html:
<script src="./dist/scripts/app.js"></script>
Source How to concat multiple transpiled JS files into a bundle.