Question

我一直在寻找过去4个小时的答案，但无法得到答案，所以我自己会问，并希望我能得到答案

我使用gulp在我的角度应用程序中构建我的ts文件，我有很多组件和rxjs的许多sdk文件（选择器，缩减器...）我有gulp任务构建我的所有ts文件到js文件，它的工作完美，唯一的问题是用户必须下载所有的js文件，并且需要永远下载所有这些文件，我想从所有这些ts文件中制作一个单独的app.min.js文件但是无法做到这一点，它没有必要解释我如何uglify这个app.js我可以自己做，但我不能把我的所有代码都放在一个文件中没有错误

Answer 1

所以我想以下将与gulp一起使用。我没有尝试使用Angular 2设置，但我想这个主题的一些变化会得到结果。

您将需要以下gulp插件：

gulp-typescript
gulp-concat
gulp-uglify
gulp-rename

或者你可以抓住gulp-load-plugins，所有这些都可以从那里获得。为简单起见，我将演示这种方法。

您需要的设置如下：

const tsConfig = require('./path/to/tsConfig.json').compilerOptions;
const plugins = require('gulp-load-plugins')();

const appFiles = ['{{THE FILES YOU WANT TO COMPILE}}'];
const buildDir = './path/to/desired/build/directory';

然后以下管道应达到预期效果：

gulp.src(appFiles)
    .pipe(plugins.typescript(tsConfig))
    .pipe(plugins.concat('app.js'))
    .pipe(plugins.uglify())
    .pipe(plugins.rename('app.min.js'))
    .pipe(gulp.dest(buildDir));

我知道我的情况，我需要在uglifying之前加入一个gulp-ng-annotate步骤，所以我不确定是否需要为Angular 2做类似的事情。但是一般的想法是组合gulp-typescript以某种方式传递tsconfig.json并gulp-concat创建一个输出文件。

希望有所帮助。让我知道从中产生了什么问题。

Answer 2

就在昨天，我有同样的要求......

经过一番挖掘后，我发现了这个优秀的样本： https://github.com/Anjmao/angular2-production-workflow

检查它 - 它基本上演示了如何将所有内容（外部库以及您自己的组件模板+样式）捆绑到两个单个js文件中。工作非常好，易于实施。

希望这会有所帮助......

Angular 2为生产创建单个app.min.js

2 个答案: