O principal a ser entendido neste nível é que, usando a configuração a seguir, você não pode concatear arquivos JS compilados diretamente.
Na configuração do compilador 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"
]
}
No HTML
System.config({
packages: {
app: {
defaultExtension: 'js',
format: 'register'
}
}
});
Na verdade, esses arquivos JS conterão módulos anônimos. Um módulo anônimo é um arquivo JS que usa, System.registermas sem o nome do módulo como primeiro parâmetro. Isso é o que o compilador de texto digitado gera por padrão quando systemjs é configurado como gerenciador de módulo.
Portanto, para ter todos os seus módulos em um único arquivo JS, você precisa aproveitar a outFilepropriedade dentro da configuração do compilador TypeScript.
Você pode usar o seguinte gole interno para fazer isso:
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'));
});
Isso pode ser combinado com algum outro processamento:
- para complicar as coisas, os arquivos TypeScript compilados
- para criar um
app.jsarquivo
- para criar um
vendor.jsarquivo para bibliotecas de terceiros
- para criar um
boot.jsarquivo para importar o módulo que inicializa o aplicativo. Este arquivo deve ser incluído no final da página (quando toda a página estiver carregada).
- para atualizar o
index.htmlpara levar em consideração esses dois arquivos
As seguintes dependências são usadas nas tarefas gulp:
- gulp-concat
- gulp-html-replace
- gulp-typescript
- engolir em seco
A seguir está um exemplo para que possa ser adaptado.
Criar app.min.jsarquivo
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'));
});
Criar vendors.min.jsarquivo
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'));
});
Criar boot.min.jsarquivo
gulp.task('boot-bundle', function() {
gulp.src('config.prod.js')
.pipe(concat('boot.min.js'))
.pipe(uglify())
.pipe(gulp.dest('./dist'));
});
O config.prod.jssimplesmente contém o seguinte:
System.import('boot')
.then(null, console.error.bind(console));
Atualize o index.htmlarquivo
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'));
});
O se index.htmlparece com o seguinte:
<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>
Observe que System.import('boot');deve ser feito no final do corpo para aguardar que todos os componentes do seu aplicativo sejam registrados no app.min.jsarquivo.
Não descrevo aqui a maneira de lidar com a minimização de CSS e HTML.