如何使用 gulp uglify 在 Angular 2 中加载缩小文件？（它缩小了 TYpescript 捆绑文件）答案

【问题标题】：How to load minified file in angular 2 using gulp uglify ? (which minifies TYpescript Bundled File)如何使用 gulp uglify 在 Angular 2 中加载缩小文件？（它缩小了 TYpescript 捆绑文件）
【发布时间】：2016-07-21 10:35:27
【问题描述】：

我有一个 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/'));

})

当我包含时，它现在在我的应用程序文件夹中生成 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 : 请不要推荐任何其他捆绑或缩小工具，我厌倦了所有这些

【问题讨论】：

标签： javascript typescript angular gulp gulp-uglify

【解决方案1】：

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

Uglify 也可以通过将 Angular 2 CLI 环境更改为 PROD 来完成

【讨论】：

你能提供一些代码或参考吗？
转到 Youtube 上的 ngConf 2016 视频并查找 Angular CLI 演示文稿。上手太棒了。
小提醒：如果你想使用Angular2 CLI，你必须遵循官方的项目结构。

【解决方案2】：

如果您从所有文件创建包，最好使用 Webpack 而不是 system.JS（系统 JS 在运行时加载每个模块文件，而 Webpack 从所有文件创建包）

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

【讨论】：

我已经尝试过使用 gulp-concat 我捆绑了它，我们得到了像 Multiple reguster cannot be importing in system.import 这样的错误
好的，我明白你在说什么，我认为如果你捆绑所有文件而不是动态加载它们，你应该使用 webpack 而不是 system.js 我会更新我的回答
我已经提到我不是在寻找替代品，因为我在所有这些方面都面临着太多问题，最后来到这里，这里的问题是我们可以使用 gulp 缩小打字稿捆绑文件并使用它或不？ .感谢您抽出宝贵时间提供帮助。
问题是您需要某种模块加载器来使用 Angular 2，并且您尝试使用动态加载器 (System.JS) 并按照其构建方式使用它。因此，您将更加努力地工作以实现您的需求。这就是为什么我认为更简单的方法是将您的代码转移到使用 Webpack 的原因，这就是它在原始文档中出现的原因。
好吧，伙计将通过 WebPack，你能确认我 2 件事情 1）我可以使用 webpack 捆绑、缩小 js 文件吗？ 2）当我将我的html移动到单独的文件夹时，它是否解决了绝对和相对路径问题？

【解决方案3】：

尝试将 mangle 选项设置为 false 的 gulp uglify。 IE .pipe(uglify(), {mangle : false})

【讨论】：