Mit Gulp, wie man zunächst kompilieren Typoskript, dann verketten Sie die Ergebnis-und verunstalten Sie?

Arbeite ich an einem Projekt mit Typescript derzeit bin ich mit einem problem konfrontiert, das kompilieren Typescript und dann verketten und das Ergebnis mit Gulp.

var gulp = require('gulp');
var ts = require('gulp-typescript');
var concat = require('gulp-concat');
var uglify = require('gulp-uglify');

gulp.task('default', function () {
    gulp.src('vendor/**/*.js')
        //I want to add ts files then combile and concat
        .gulp.src('src/**/*.ts')
        .pipe(sourcemaps.init())
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(concat('all.js'))
        .pipe(uglify());
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

In Worte, was ich tun müssen, ist:

  1. Man die externe JavaScript Bibliotheken.
  2. Bekommen Typescripts.
  3. Kompilieren Typescripts mit Quelle gekennzeichnet.
  4. Concat das Ergebnis an die Sie zuvor Hinzugefügt JavaScript.
  5. Verunstalten Sie.
  6. Erstellen der map sorce.
  7. Speichern Sie das Ergebnis in einem Ordner.

Update

Oder nur ein Weg, um sicherzustellen, dass die TypeScript kompiliert wird, bevor
Verfahren mit Verkettung das Ergebnis mit JavaScript.

  • Was ist dein problem? Ist es die output.js? Man konnte 2 Aufgaben erfordern die anderen.
  • Ja, aber ich brauche, um sicherzustellen, dass die TypeScript kompiliert wird, bevor Sie mit der Verkettung das Ergebnis mit JavaScript
InformationsquelleAutor Mustafa Dwekat | 2016-03-22
  1. 4

    Ich bin eher ein coffeescript Kerl, aber was die Aufteilung in zwei separate Aufgaben (Lösung unten nicht getestet, und es ist eine temporäre Ausgabe der ./tmp Ordner):

    gulp.task('ts', function () {
    gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }))
        .pipe(gulp.dest('./tmp/ts'));
});

gulp.task('default', ['ts'], function() {
    gulp.src(['vendor/**/*.js', './tmp/ts/output.js'])
        .pipe(sourcemaps.init())
        .pipe(uglify())
        .pipe(sourcemaps.write('/'))
        .pipe(gulp.dest('./dist/'));
});

    Nutzung (im terminal):

    gulp default

    Schluck wird zuerst der ts Aufgabe, dann, sobald dies abgeschlossen ist, wird es laufen die default Aufgabe

    • Das ist großartig, aber wie stellen Sie sicher, dass die TypeScript Quelle verfügbar ist, wenn das Debuggen?
    • Wie ist, dass Sie in Ihren derzeitigen workflow?
    • Danke, habe ich den Hinweis gulp.task('default', ['ts'], function() {}) und jetzt habe ich etwas, das funktionieren würde. Ich habe nicht testen Sie es sehr gut, aber es funktioniert für jetzt. also vielen Dank
    InformationsquelleAutor cl3m
  2. 5

    Wenn Sie die event-stream Paket von npm, dann können Sie dies tun:

    var merge = require('event-stream').merge;

gulp.task('default', function() {
    var js = gulp.src('vendor/**/*.js');

    var ts = gulp.src('src/**/*.ts')
        .pipe(ts({
            noImplicitAny: true,
            out: 'output.js'
        }));

    return merge(js, ts)
        .pipe(concat('all.js'))
        .pipe(uglify())
        .pipe(gulp.dest('./dist/'));
});

    Ich weiß nicht, aus der Spitze von meinem Kopf, wie source-Karten arbeiten, aber ich bin sicher, es ist einfach herauszufinden.

    • Ich habe Ihre Allgemeinen Ansatz, sondern verwendet das stream-Serien-Paket statt.
    InformationsquelleAutor Mike Jerred
Schreibe einen Kommentar