Gulp: Generowanie sourcemaps dla skryptów skróconych i niezminiaturowanych

Question

Jestem nowy, który przełknął i wpadł na problem, który prawdopodobnie jest dość powszechnym scenariuszem. Próbuję todo kompilować maszynopis do javascript, tworząc dla niego sourcemap, a następnie działając brzydko. Chciałbym mieć sourcemap dla brzydkich, a także niezgrzężonych js.

Co Próbuję achive jest następująca struktura plików:

framework.js 
framework.js.map < this won't work 
framework.min.js 
framework.min.js.map 

To jest moje zadanie łyk:

var gulp = require('gulp'), 
uglify = require('gulp-uglify') 
ts = require("gulp-typescript") 
sourcemaps = require('gulp-sourcemaps') 
rename = require('gulp-rename'); 

var tsProject = ts.createProject("tsconfig.json"); 


gulp.task('typescript', function(){ 
    tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()).js 
    .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version 
    .pipe(gulp.dest("dist")) 
    .pipe(uglify()) // Code will fail here 
    .pipe(rename({suffix:'.min'})) 
    .pipe(sourcemaps.write('.')) // Write sourcemap for minified version. 
    .pipe(gulp.dest("dist")); 
}); 

gulp.task('default', ['typescript']); 

Jak widać, biegnę sourcemaps.write () dwa razy, aby uzyskać dwa różne pliki. To daje mi błąd

tream.js:74                   
    throw er; // Unhandled stream error in pipe.         
^GulpUglifyError: unable to minify JavaScript          
at createError  (C:\Users\alexa\Dropbox\code\Web\mhadmin\framework\node_modules\gulp-uglify\lib\create-error.js:6:14) 

Pomijając pierwszy jeden z sourcemap.write() wywołuje spowoduje poprawnego sourcemap dla minified wersji pliku.

Wszelkie pomysły, jak to naprawić?

EDIT: To nie jest dokładnie duplikatem gulp: uglify and sourcemaps jak muszę napisać kilka sourcemaps z wielu połączeń do gulp.dest()

Answer 1

Problemem jest to, że po pierwszym .pipe(sourcemaps.write('.')) masz dwa pliki w swoim strumieniu:

framework.js 
framework.js.map 

Piszesz te dwa pliki w systemie plików (co jest w porządku), ale potem można próbować uruchomić uglify() na obaj. Ponieważ Twój plik framework.js.map nie jest plikiem JavaScript i nie zawiera poprawnego kodu JavaScript, wtyczka uglify() rzuca się.

Po napisaniu framework.js.map do systemu plików, tak naprawdę nie ma powodu, aby zatrzymać ten plik w strumieniu. Obiekt pliku winyl dla framework.js nadal ma właściwość .sourceMap, która przenosi wszystkie transformacje do tej pory, co oznacza, że ​​można po prostu usunąć plik framework.js.map ze strumienia.

gulp-filter Wtyczka pozwala ci zrobić tylko, że:

var filter = require('gulp-filter'); 

gulp.task('typescript', function(){ 
    return tsProject.src() 
    .pipe(sourcemaps.init()) 
    .pipe(tsProject()).js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest("dist")) 
    .pipe(filter('**/*.js')) // only let JavaScript files through here 
    .pipe(uglify()) 
    .pipe(rename({suffix:'.min'})) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest("dist")); 
}); 

Po .pipe(filter('**/*.js')) tylko plik framework.js będzie w strumieniu i uglify() nie rzuci się więcej.

Answer 2

Wygląda rodzaju włamania, ale działa

gulp.src('TypeScript/Test.ts') 
    .pipe(plumber()) 
    .pipe(sourcemaps.init()) 
    .pipe(ts(tsOptions)).js 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./wwwroot/test')) 
    .pipe(uglify()) 
    .pipe(rename({ extname: '.min.js' })) 
    .pipe(sourcemaps.write('.')) 
    .pipe(gulp.dest('./wwwroot/test')); 

Magia jest w plumber. Hydraulik zapobiega zatrzymywaniu procesu z wyjątkiem. Ale główne zainteresowanie, dlaczego wyjątek się dzieje. Jest to całkiem jasne. W swoim kodzie tworzysz sourcemap przez .pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version, a następnie próbujesz go ugodzić. I tak, sourcemap nie jest js, a wyjątek się dzieje. Z plumber ten wyjątek ignoruje i osiągasz swój cel.

Ale mogłem wymyślić coś złego, polecam ci znaleźć bardziej prawdziwe rozwiązanie.