Menu
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.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 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({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']);
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.
206
In 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 compiled 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:
71
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.
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
