2016-07-21 13 views
2

Ich habe einen Winkel 2-Anwendung, in dem Typoskript Compiler-Optionen definiert eine einzelne outFile zu erzeugen, die Scripts1.js und Scripts1.js.map istWie wird die minimierte Datei in angular 2 mit gulp uglify geladen? (Die minifies Typoskript Gebündelte File)

Jetzt in meinem 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> 

die jetzt funktioniert prima Wie dies mit schluck

Mein gulpFile.js

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

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

}) 
verunstalten

die jetzt script1.js in meiner app Ordner erzeugt, wenn ich schließen

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

diese minimierte Datei, die es nicht funktioniert und keine Fehler in der Konsole. Ich schätze, ich verpasse Map-Dateien beim Hochladen. Ich habe versucht, diese

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/')); 

}) 

PS: Bitte keine weiteren Bündelung oder Verkleinerungs Tools vorschlagen, ich bin krank aller

Antwort

0

Wenn Sie Bündel von allen Ihren Dateien erstellen wäre es besser, Webpack zu verwenden und nicht system.JS (System JS lädt jede Moduldatei zur Laufzeit, während Webpack aus all Ihren Dateien ein Bündel erstellt)

Es gibt eine großartige Erklärung, wie man eine Webpack-Datei in der ursprünglichen eckigen Dokumentation erstellt. https://angular.io/docs/ts/latest/guide/webpack.html

+0

Bereits versuchte ich, dass ich gebündelt, dass Schluck-Concat mit und wir bekommen Fehler wie Multiple reguster nicht – sudhir

+0

Ordnung in system.import importiert werden Ich sehe, was Sie rede über und ich denke, dass für Ihren Fall, wenn Sie all Ihre Datei bündeln und sie nicht dynamisch laden, sollten Sie webpack und nicht system.js verwenden Ich werde meine Antwort aktualisieren –

+0

Ich erwähnte bereits, dass ich nicht nach Alternativen suche Da ich zu viele Probleme auf all diesen Problemen hatte und schließlich hier gelandet bin, bezieht sich hier die Frage, ob wir die mit dem Typoskript gebündelte Datei mit Schluck verkleinern und benutzen können oder nicht? . Danke, dass du dir Zeit genommen hast und geholfen hast. – sudhir

0

Verwenden Sie besser Angular 2 CLI für die Entwicklung von Apps. Es bietet alle grundlegenden Funktionen wie Build, Run, Komponententests, das Transpilieren von TS-Dateien, mit NG-Befehlen können Sie Seiten erstellen, Routen mit vordefiniertem Code.

verunstalten kann auch durch Ändern Angular 2 CLI Umgebung erfolgen

+0

Kannst du Code oder Referenzen dafür bereitstellen? – sudhir

+0

Goto ngConf 2016 Videos auf Youtube und suchen Sie nach Angular CLI Präsentation. Es ist wunderbar, um anzufangen. –

+0

Kleine Erinnerung: Wenn Sie Angular2 CLI verwenden möchten, müssen Sie der offiziellen Projektstruktur folgen. –

0

Try schluck mit mangle Option als falsch gesetzt verunstalten prod. dh .pipe (uglify() {mangle: false})