如何使用gulp uglify在角度2中加载缩小的文件？ （缩小TYpescript捆绑文件）

Question

我有一个angular 2应用程序，其中定义了typescript编译器选项以生成单个 outFile ，即Scripts1.js和Scripts1.js.map

现在在我的index.html

<script src="Scripts/Script1.js"></script>
    <script>
            System.config({
                packages: {
                    'V1/components/main': {
                        format: 'register',
                        defaultExtension: 'js',
                        defaultJSExtensions: true
                    }
                }
            });
            debugger;
            //System.import('Scripts/main')
            System.import('V1/components/main')
                  .then(null, console.error.bind(console));
        </script>

现在工作正常如何使用gulp

来解决这个问题

我的gulpFile.js

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
      .pipe(uglify())
      .pipe(gulp.dest('app/'));

})

现在，当我包含

时，会在我的app文件夹中生成Script1.js

<script src="app/Script1.js"></script>

这个缩小的文件不起作用，并且在控制台中没有错误。 uglifying，我想我错过了地图文件。我试过这个

gulp.task('MinifyBundled', function () {

    console.log('testiang');
    return gulp.src(config.src2)
        .pipe(sourcemaps.init({ loadMaps: true }))
      .pipe(uglify())
         .pipe(sourcemaps.write('app/'))
      .pipe(gulp.dest('app/'));

})

P.S：请不要建议任何其他捆绑或缩小工具，我厌倦了所有

Answer 1

如果你从所有文件创建bundle，那么最好使用Webpack而不是system.JS（System JS在运行时加载每个模块文件，而Webpack从你的所有文件中生成一个包）

如何在原始角度文档中创建webpack文件有一个很好的解释。 https://angular.io/docs/ts/latest/guide/webpack.html

Answer 2

更好地使用Angular 2 CLI开发应用程序。它提供所有基线工作，如构建，运行，单元测试，TS文件的转换，使用可以创建页面的NG命令，带有预定义代码的路径。

通过将Angular 2 CLI环境更改为PROD

，也可以完成Uglify

Answer 3

尝试使用mangle选项设置为false的gulp uglify。 即 .pipe（uglify（），{mangle：false}）