如何连续和缩小angular2应用程序？

Question

I would like to concat & minify an angular2 application. What I did was first concatenating all my *.js files (boot.js, application.js then all components) in one file and injected it to my index.html. I also deleted the

<script>
        System.config({
            packages: {
                app: {
                    defaultExtension: 'js'
                }
            }
        });
        System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>

and replaced it with my

<script src="js/allMyConcatFilesIntoOne.js"></script>

But I got the error, that require is missing/unknown.

How are angular2 applications filled into one file? Do I have to gather all typescript files first and then concat and then compile it via gulp?

Regards

Tenoda

Answer 1

Use a gulpfile.js like this:

/// <binding Clean='clean' />
            "use strict";

            var gulp = require("gulp"),
                rimraf = require("rimraf"),
                concat = require("gulp-concat"),
                cssmin = require("gulp-cssmin"),
                uglify = require("gulp-uglify"),
                tsc = require("gulp-typescript");

            var webroot = "./wwwroot/";

            var paths = {
                js: webroot + "js/**/*.js",
                ts: webroot + "app/**/*.ts",
                minJs: webroot + "js/**/*.min.js",
                css: webroot + "css/**/*.css",
                minCss: webroot + "css/**/*.min.css",
                concatJsDest: webroot + "js/site.min.js",
                concatCssDest: webroot + "css/site.min.css"
            };

            gulp.task("clean:js", function (cb) {
                rimraf(paths.concatJsDest, cb);
            });

            gulp.task("clean:css", function (cb) {
                rimraf(paths.concatCssDest, cb);
            });

            gulp.task("clean", ["clean:js", "clean:css"]);

            gulp.task("min:js", function () {
                return gulp.src([paths.js, "!" + paths.minJs], { base: "." })
                    .pipe(concat(paths.concatJsDest))
                    .pipe(uglify())
                    .pipe(gulp.dest("."));
            });

            gulp.task("min:css", function () {
                return gulp.src([paths.css, "!" + paths.minCss])
                    .pipe(concat(paths.concatCssDest))
                    .pipe(cssmin())
                    .pipe(gulp.dest("."));
            });

            gulp.task("min", ["min:js", "min:css"]);