14

私はgulpが初めてで、おそらくかなり一般的なシナリオである問題に遭遇しました。私がやろうとしているのは、typescript を javascript にコンパイルし、そのソースマップを作成してから、uglify を実行することです。ugliyfied と unuglified js のソースマップが欲しいです。

私が達成しようとしているのは、次のファイル構造です。

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

ご覧のとおり、2 つの異なるファイルを取得するために sourcemaps.write() を 2 回実行しています。これは私にエラーを与えます

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)

sourcemap.write() 呼び出しの最初の呼び出しを省略すると、ファイルの縮小バージョンの正しいソースマップが生成されます。

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

編集:これは、gulp.dest() への複数の呼び出しで複数のソースマップを記述する必要があるため、gulp: uglify と sourcemapsの正確な複製ではありません

4

2 に答える 2

22

問題は、最初の後に.pipe(sourcemaps.write('.'))ストリームに 2 つのファイルがあることです。

framework.js
framework.js.map

uglify()これら 2 つのファイルをファイル システムに書き込みますが (これで問題ありません)、両方で実行しようとします。framework.js.mapファイルは JavaScript ファイルではなく、有効な JavaScript コードが含まれていないため、プラグuglify()インがスローします。

ファイル システムに書き込んframework.js.mapだ後は、そのファイルをストリームに保持する理由はもうありません。のビニール ファイル オブジェクトには、これまでのすべての変換を保持framework.jsするプロパティがあります。つまり、ストリームからファイルを削除するだけです。.sourceMapframework.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()スローされません。

于 2016-09-24T11:29:39.620 に答える