Comment combiner (minify) compilé Angular 2 components?

si vous voulez compiler tous vos fichiers en un seul, vous devez utiliser la propriété outFile du compilateur. Il est configurable à travers le plugin gulp-typescript.

de cette façon, vous n'avez pas besoin de configurer SystemJS pour charger le module basé sur les noms de fichier:

<script>
  // Not necessary anymore
  /* System.config({
    packages: {        
      app: {
        format: 'register',
        defaultExtension: 'js'
      }
    }
  }); */
  System.import('app/main')
        .then(null, console.error.bind(console));
</script>

les noms de modules et leur contenu sont maintenant présents dans ce fichier unique. La même chose pour les fichiers packaged bundle de L'Angular2 la distribution ( angular2.dev.js , http.dev.js , ...). Pour utiliser ce fichier, il suffit de l'inclure dans un script élément.

de cette façon, vous ne briserez pas les importations de modules.

alors vous pouvez miniifier ce fichier unique avec le plugin uglify de gulfp...

* * créer un seul fichier à partir de TS avec des options dans tsconfig.json.

{
  "compilerOptions": {
    "target": "es5",
    "module": "system",
    "moduleResolution": "node",
    "sourceMap": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "removeComments": true,
    "noImplicitAny": false,
    "outDir":"client/build/",
    "outFile": "client/build/all.js",
    "declaration": true
  },
  "exclude": [
    "node_modules",
    "server"
  ],
  "include": [
        "client/*.ts",
        "client/**/*.ts",
        "client/**/**/*.ts"
  ]   
}

// Include all folders to put to a file.

* * construire le fichier de sortie et inclure comme suit: Exemple:

<script>


  // Alternative way is compile in all.js and use the following system config with all the modules added to the bundles.
  // the bundle at build/all.js contains these modules
System.config({
    bundles: {
      'client/build/all.js': ['boot','components/all/present','components/main/main','components/register/register','components/login/login','components/home/home','services/userdetails','services/httpprovider']
    }
  });

  // when we load 'app/app' the bundle extension interrupts the loading process
  // and ensures that boot of build/all.js is loaded first
  System.import('boot');


    </script>

** Rapetisser le tout.fichier js comme vous le faites normalement.

puisque vous utilisez déjà Gulfp, vous pouvez simplement ajouter webpack dans votre tâche gulfp pour combiner tous vos fichiers source JavaScript (ainsi que les sources Angular2) en un seul. Voici un échantillon de ce que votre webpack.config.js pourrait ressembler à:

module.exports = {
  entry: './src/app/app',
  output: {
    path: __dirname + '/src', publicPath: 'src/', filename: 'bundle.js'
  },
  resolve: {
    extensions: ['', '.js', '.ts']
  },
  module: {
    loaders: [{
      test: /\.ts/, loaders: ['ts-loader'], exclude: /node_modules/
    }]
  }
};

les sections pertinentes de votre gulffile .js sont

var webpack = require('webpack-stream');
var htmlReplace = require('gulp-html-replace');
var gulp = require('gulp');

gulp.task('webpack', function() {
  return gulp.src('src/app/*.ts')
    .pipe(webpack(require('./webpack.config.js')))
    .pipe(gulp.dest('src/'));
});

remplacer gulp.dest('src/') par le texte suivant: l'endroit où vous voulez que votre code de production réside.

vous avez ensuite besoin de traiter vos fichiers HTML pour avoir les références de fichier source JavaScript appropriées (également dans gulffile.js ).

gulp.task('html', ['templates'], function() {
  return gulp.src('src/index.html')
    .pipe(htmlReplace({
      'js': ['bundle.js']
    }))
    .pipe(gulp.dest('dist/'));
});

si vous voulez numériser vos fichiers JavaScript, vous pouvez utiliser UglifyJS2 . (Notez cependant qu'il y a quelque chose qui ne va pas avec l'obscurcissement, d'où le mangle: false . Voir ce ainsi le lien pour plus de détails). Voici le fichier pertinent.js contenu:

gulp.task('js', ['webpack'], function() {
  return gulp.src('src/bundle.js')
    .pipe(uglify({
            mangle: false
          }))
    .pipe(gulp.dest('dist/'));
});

de cette façon, votre code de production se retrouve dans votre dossier dist d'où vous pouvez le déployer. Maintenant, c'est à vous de décider si vous allez dans une branche de production ou non.

n'hésitez pas à vous référer à mon projet de mots sur Github si vous voulez voir une version de travail sur une très petite application Angular2.

Si vous utilisez @angular/cli vous pouvez exécuter

ng build --prod

pour minifier et gzip le code.