2016-11-15 76 views
-1

我一直在寻找的最后4小时的答案,无法得到答案,所以我会问我自己,希望我能得到答案角2创建单一app.min.js生产

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

+0

你是否在使用SystemJS作为模块加载器?如果是这样的话[SystemJS Builder](https://github.com/systemjs/builder)适合捆绑和缩小一切。 – JayChase

回答

1

所以我想以下将与吞咽工作。我没有尝试过Angular 2的设置,但我想这个主题的一些变化会得到结果。

您将需要以下一饮而尽插件:

  • 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)); 

我知道我的情况,我需要包括一个gulp-ng-annotate步uglifying之前,所以我不知道是否类似的东西将不得不为Angular 2做。但总的想法是gulp-typescript以某种方式通过你的tsconfig.jsongulp-concat为创造一个输出文件。

希望有所帮助。让我知道由此产生的问题。

+0

这建立了一切,但没有删除要求陈述,所以有错误我该怎么办?我想我必须改变tsconfig,但我不知道该怎么改 – nikagar4

+0

Gulp不是一个模块打包器,这意味着你不能只使用gulp将模块连接成一个文件,并期望它工作。你需要将Gulp与某种模块捆绑器结合使用(如果你真的想继续使用gulp,因为模块捆绑器可以覆盖许多可用于吞噬的功能)。我发现这篇关于使用WebPack和Gulp的文章:https://webpack.github.io/docs/usage-with-gulp.html – theRealRobG

+0

或者实际上这篇文章来自TypeScript关于使用TS和gulp以及模块捆绑器:https:// www.typescriptlang.org/docs/handbook/gulp.html – theRealRobG

1

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

小挖后,我发现这个极好的例子: https://github.com/Anjmao/angular2-production-workflow

检查出来 - 基本上,它演示了如何准确地捆绑一切(外部库以及您自己的组件模板+样式)分成两个单独的js文件。工作绝对好,很容易实现。

希望这有助于...