Gulp：縮小化されたスクリプトと非縮小化されたスクリプトの両方のソースマップを生成する

Question

私はgulpを初めて使用しているので、おそらくかなり一般的なシナリオです。私がやりたいことは、typescriptをjavascriptにコンパイルして、ソースマップを作成してからuglifyを実行することです。 ugliyfiedとnonuuglified jsのソースマップを用意したいと思います。私はachiveしようとしている何

は、以下のファイル構造である：

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

これは私の一気の作業です：あなたが見ることができるように

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

、私は（sourcemaps.writeを実行していますよ）を2回実行して2つの異なるファイルを取得します。これは、（）の呼び出しは、ファイルの縮小さバージョンの正しいsourcemapになりますsourcemap.writeの最初のものを残してくれエラー

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) 

を与えます。

これを修正する方法はありますか？

編集：私はgulp.destする複数の呼び出しで複数のsourcemapsを書く必要があり、これは（正確にgulp: uglify and sourcemapsの複製ではありません）

Answer 1

問題は最初.pipe(sourcemaps.write('.'))後、あなたのストリームに2つのファイルが持っていることです：あなたは（結構です）ファイルシステムにこれらの2つのファイルを書き込み、その後、あなたが上uglify()を実行しよう

framework.js 
framework.js.map 

を両方とも。 framework.js.mapファイルはJavaScriptファイルではなく、有効なJavaScriptコードが含まれていないため、uglify()プラグインがスローアップします。

framework.js.mapをファイルシステムに書き込んだ後は、そのファイルをストリームに保存する必要はありません。 framework.jsのビニールファイルオブジェクトにはまだこれまでのすべての変換を含む.sourceMapプロパティがあります。つまり、ストリームからファイルframework.js.mapを削除するだけです。

gulp-filterプラグインみましょうあなたはちょうどそれを実行します。

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")); 
}); 

.pipe(filter('**/*.js'))後だけframework.jsファイルがストリームになり、uglify()はもう投げないであろう。

Answer 2

はハックのようなもののように思えるが、それは

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

の作品魔法はplumberです。配管工によって例外時の処理が停止することを防ぎます。しかし、なぜ例外が起こるかという主な関心事。それで、それはかなり明確です。あなたのコードでは、.pipe(sourcemaps.write('.')) // Write sourcemap for non-minified version経由でソースマップを作成し、それを醜い試みます。はい、sourcemapはjsではなく、例外が発生します。 plumberでこの例外は無視され、あなたの目標は達成されます。

しかし、私は何か間違ったことが分かった可能性があります。より真実の解決策を見つけることをお勧めします。