すべての結果jsを小さくするための最良の方法

Question

私はAngular2 appをビルドしています。 への道順すべての結果として得られるjsファイルとconcatそれは1つのファイルにまとめられますか？

ガルプファイル：

var paths = { 
concatJsSrc : [ 
      "node_modules/core-js/client/shim.min.js", 
      "node_modules/zone.js/dist/zone.min.js", 
      "node_modules/systemjs/dist/system.js", 
      "node_modules/@angular/core/bundles/core.umd.min.js", 
      "node_modules/@angular/common/bundles/common.umd.min.js", 
      "node_modules/@angular/compiler/bundles/compiler.umd.min.js", 
      "node_modules/@angular/platform-browser/bundles/platform-browser.umd.min.js", 
      "node_modules/@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js", 
      "node_modules/@angular/http/bundles/http.umd.min.js", 
      "node_modules/@angular/router/bundles/router.umd.min.js", 
      "node_modules/@angular/forms/bundles/forms.umd.min.js", 
      "node_modules/@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js", 
      "node_modules/angular-in-memory-web-api/bundles/in-memory-web-api.umd.js", 
      "node_modules/rxjs/**/*.js", 
      "Scripts/systemjs.config.js", 
      "Scripts/app/**/*.js", 
      "Scripts/theme.js" 
     ], 
    concatJsDest: "application.min.js" 
}; 
gulp.task("min:js", 
function() { 
    return gulp.src(paths.concatJsSrc) 
     .pipe(concat(paths.concatJsDest)) 
     .pipe(uglify()) 
     .pipe(gulp.dest("/app")); }); 

index.htmlファイル：

<script src="app/application.min.js"></script> 
<script> 
    System.import('app') 
     .catch(function (err) { 
      console.error(err); 
     }); 
</script> 

systejs.config.jsファイル：

(function (global) { 
    System.config({ 
    paths: { 
     'npm:': "libs/" 
    }, 
    map: { 
     app: "app", 
     '@angular/core': "npm:@angular/core/bundles/core.umd.min.js", 
     '@angular/common': "npm:@angular/common/bundles/common.umd.min.js", 
     '@angular/compiler': "npm:@angular/compiler/bundles/compiler.umd.min.js", 
     '@angular/platform-browser': "npm:@angular/platform-browser/bundles/platform-browser.umd.min.js", 
     '@angular/platform-browser-dynamic': "npm:@angular/platform-browser-dynamic/bundles/platform-browser-dynamic.umd.min.js", 
     '@angular/http': "npm:@angular/http/bundles/http.umd.min.js", 
     '@angular/router': "npm:@angular/router/bundles/router.umd.min.js", 
     '@angular/forms': "npm:@angular/forms/bundles/forms.umd.min.js", 
     '@ng-bootstrap/ng-bootstrap': "npm:@ng-bootstrap/ng-bootstrap/bundles/ng-bootstrap.js", 
     'rxjs': "npm:rxjs", 
     'angular-in-memory-web-api': "npm:angular-in-memory-web-api/bundles/in-memory-web-api.umd.js" 
    }, 
    packages: { 
     app: { 
      main: "./application.min.js", 
      //main: "./main.js", 
      defaultExtension: "js" 
     }, 
     rxjs: { 
      defaultExtension: "js" 
     } 
    } 
    });})(this); 

Answer 1

我々 GULPを使用して、JSファイルの連結、縮小、uglifyおよびvesioning処理を実行できます。私たちは'scripts-minify-concat-versioning' gulpタスクを作成して、JSファイル（file1.js、file2.js、file3.js）を連結し、ファイルを縮小し、uglifyし、バージョンを変更します。結果ファイルはapp.min.jsになり、位置build/src/jsにあります。

var gulp = require('gulp'); 
var rev = require('gulp-rev'); 
var uglify = require('gulp-uglify'); 
var concat = require('gulp-concat'); 

var scriptFiles = [ 
    "file1.js", "file2.js", "file3.js" 
]; 

gulp.task('scripts-minify-concat-versioning', [], function() { 
    return gulp.src(scriptFiles) 
     .pipe(concat("app.min.js"))         // Make a single file 
     .pipe(uglify())            // Make the file titchy tiny small 
     .pipe(rev())             // Suffix a version number to it 
     .pipe(gulp.dest("build/src/js")); 
});