Question

我正在构建Angular2应用。我想知道最大化的方式是什么缩小所有结果的应用程序的js文件和 concat 它成为1个单独的文件？

Gulp文件：

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文件的concat，minify，uglify和vesioning过程。我们创建了一个＆＃39; scripts-minify-concat-versioning＆＃39; gulp任务，用于汇总JS文件（ file1.js，file2.js和file3.js ），minify，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"));
});

缩小所有结果js

1 个答案: