La chose clé à comprendre à ce niveau est qu'en utilisant la configuration suivante, vous ne pouvez pas concaténer directement les fichiers JS compilés.
Dans la configuration du compilateur TypeScript:
{
"compilerOptions": {
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"declaration": false,
"stripInternal": true,
"module": "system",
"moduleResolution": "node",
"noEmitOnError": false,
"rootDir": ".",
"inlineSourceMap": true,
"inlineSources": true,
"target": "es5"
},
"exclude": [
"node_modules"
]
}
Dans le HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
En fait, ces fichiers JS contiendront des modules anonymes. Un module anonyme est un fichier JS qui utilise System.registermais sans le nom du module comme premier paramètre. C'est ce que le compilateur dactylographié génère par défaut lorsque systemjs est configuré comme gestionnaire de module.
Ainsi, pour avoir tous vos modules dans un seul fichier JS, vous devez exploiter la outFilepropriété dans la configuration de votre compilateur TypeScript.
Vous pouvez utiliser ce qui suit à l'intérieur de gulp pour ce faire:
const gulp = require('gulp');
const ts = require('gulp-typescript');
var tsProject = ts.createProject('tsconfig.json', {
typescript: require('typescript'),
outFile: 'app.js'
});
gulp.task('tscompile', function () {
var tsResult = gulp.src('./app/**/*.ts')
.pipe(ts(tsProject));
return tsResult.js.pipe(gulp.dest('./dist'));
});
Cela pourrait être combiné avec un autre traitement:
- pour uglifier les choses les fichiers TypeScript compilés
- pour créer un
app.jsfichier
- pour créer un
vendor.jsfichier pour des bibliothèques tierces
- pour créer un
boot.jsfichier pour importer le module qui amorce l'application. Ce fichier doit être inclus à la fin de la page (lorsque toute la page est chargée).
- mettre à jour le
index.htmlpour prendre en compte ces deux fichiers
Les dépendances suivantes sont utilisées dans les tâches gulp:
- gulp-concat
- gulp-html-replace
- gulp-typescript
- gulp-uglify
Ce qui suit est un exemple afin qu'il puisse être adapté.
Créer un app.min.jsfichier
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(concat('app.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Créer un vendors.min.jsfichier
gulp.task('vendor-bundle', function() {
gulp.src([
'node_modules/es6-shim/es6-shim.min.js',
'node_modules/systemjs/dist/system-polyfills.js',
'node_modules/angular2/bundles/angular2-polyfills.js',
'node_modules/systemjs/dist/system.src.js',
'node_modules/rxjs/bundles/Rx.js',
'node_modules/angular2/bundles/angular2.dev.js',
'node_modules/angular2/bundles/http.dev.js'
])
.pipe(concat('vendors.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Créer un boot.min.jsfichier
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
Le config.prod.jscontient simplement les éléments suivants:
System.import('boot')
.then(null, console.error.bind(console));
Mettre à jour le index.htmlfichier
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'));
});
Le index.htmlressemble à ce qui suit:
<html>
<head>
<!-- Some CSS -->
<!-- build:vendor -->
<script src="node_modules/es6-shim/es6-shim.min.js"></script>
<script src="node_modules/systemjs/dist/system-polyfills.js"></script>
<script src="node_modules/angular2/bundles/angular2-polyfills.js"></script>
<script src="node_modules/systemjs/dist/system.src.js"></script>
<script src="node_modules/rxjs/bundles/Rx.js"></script>
<script src="node_modules/angular2/bundles/angular2.dev.js"></script>
<script src="node_modules/angular2/bundles/http.dev.js"></script>
<!-- endbuild -->
<!-- build:app -->
<script src="config.js"></script>
<!-- endbuild -->
</head>
<body>
<my-app>Loading...</my-app>
<!-- build:boot -->
<!-- endbuild -->
</body>
</html>
Notez que le System.import('boot');doit être effectué à la fin du corps pour attendre que tous les composants de votre application soient enregistrés à partir du app.min.jsfichier.
Je ne décris pas ici la manière de gérer la minification CSS et HTML.