角2創建單一app.min.js生產

-1

我一直在尋找的最後4小時的答案，無法得到答案，所以我會問我自己，希望我能得到答案角2創建單一app.min.js生產

我使用gulp在我的角度應用程序中構建我的ts文件，我有很多組件和許多用於rxjs的sdk文件（選擇器，縮減器...）我有大量的任務將所有我的ts文件構建成js文件，它完美的工作，唯一的問題是，用戶必須下載所有的js文件，並且需要永久下載所有這些文件，我想從所有這些ts文件中創建一個app.min.js文件，但無法做到它沒有必要解釋我如何uglify這個app.js我可以做到這一點我自己但我不能讓我的所有代碼在一個文件中沒有錯誤

來源

2016-11-15 nikagar4

你是否在使用SystemJS作爲模塊加載器？如果是這樣的話[SystemJS Builder]（https://github.com/systemjs/builder）適合捆綁和縮小一切。 – JayChase

所以我想以下將與吞嚥工作。我沒有嘗試過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.json和gulp-concat爲創造一個輸出文件。

希望有所幫助。讓我知道由此產生的問題。

來源

2016-11-15 18:24:10 theRealRobG

這建立了一切，但沒有刪除要求陳述，所以有錯誤我該怎麼辦？我想我必須改變tsconfig，但我不知道該怎麼改 – nikagar4

Gulp不是一個模塊打包器，這意味着你不能只使用gulp將模塊連接成一個文件，並期望它工作。你需要將Gulp與某種模塊捆綁器結合使用（如果你真的想繼續使用gulp，因爲模塊捆綁器可以覆蓋許多可用於吞噬的功能）。我發現這篇關於使用WebPack和Gulp的文章：https：//webpack.github.io/docs/usage-with-gulp.html – theRealRobG

或者實際上這篇文章來自TypeScript關於使用TS和gulp以及模塊捆綁器：https：// www.typescriptlang.org/docs/handbook/gulp.html – theRealRobG

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

小挖後，我發現這個極好的例子： https://github.com/Anjmao/angular2-production-workflow

檢查出來 - 基本上，它演示瞭如何準確地捆綁一切（外部庫以及您自己的組件模板+樣式）分成兩個單獨的js文件。工作絕對好，很容易實現。

希望這有助於...

來源

2016-11-17 12:22:05 Wolfgang

角2創建單一app.min.js生產

回答

相關問題