54

ガルプを使用しています。

1つまたは複数のJSファイル（jQueryなど）を1つにまとめて縮小し、配布フォルダーに書き込みたいと思います。

これは私がそれを行う方法です：

minifyJS(['/js/myModule.file1.js',
          '/js/myModule.file2.js'], '/dist/js', 'myModule')

関数：

function minifyJS(sourceFiles, destinationFolder, filenameRoot) {
    return gulp.src(sourceFiles)
        .pipe(plumber())

        // .pipe(sourcemaps.init()) here ???
        .pipe(concat(filenameRoot + '.js'))
        .pipe(sourcemaps.init()) // or here ???

        .pipe(gulp.dest(destinationFolder)) // save .js
        .pipe(uglify({ preserveComments: 'license' }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(destinationFolder)) // save .min.js
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(destinationFolder)) // save .map
}

場所がよくわからないのですがsourcemaps.init()…

複数 (私の場合は 2 つ) のマップ ファイルを作成する必要がありますか (ブラウザーでサポートされている場合は便利です)、または 1 つだけ ( /maps/myModule.map ) を作成する必要がありますか?

4

1 に答える 1

116

これが Gulp でのソースマップの仕組みです: 経由で選択した各要素はgulp.src、元のファイル名だけでなく、バ​​ッファー内のコンテンツで構成される仮想ファイル オブジェクトに転送されます。それらはストリームを介してパイプされ、そこでコンテンツが変換されます。

ソースマップを追加すると、それらの仮想ファイル オブジェクトにもう 1 つのプロパティ、つまりソースマップが追加されます。変換ごとに、ソースマップも変換されます。そのため、concat の後、uglify の前にソースマップを初期化すると、ソースマップはその特定のステップからの変換を格納します。ソースマップは、元のファイルが concat からの出力であると「考え」、実行された唯一の変換ステップは醜いステップです。そのため、ブラウザでそれらを開くと、一致するものはありません。

グロビングの直後にソースマップを配置し、結果を保存する前に直接保存することをお勧めします。Gulp ソースマップは変換間で補間されるため、発生したすべての変更を追跡できます。元のソース ファイルは選択したファイルになり、ソース マップはそれらの元に戻ります。

これはあなたのストリームです:

 return gulp.src(sourceFiles)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(concat(filenameRoot + '.js'))
    .pipe(gulp.dest(destinationFolder)) // save .js
    .pipe(uglify({ preserveComments: 'license' }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(destinationFolder)) // save .min.js

sourcemaps.writeは実際にソースマップを書き込むわけではなく、gulp.dest.

まったく同じソースマップ プラグインがネイティブに Gulp 4 に含まれます: http://fettblog.eu/gulp-4-sourcemaps/ -- ソースマップが Gulp の内部でどのように機能するかについて詳しく知りたい場合は、私のGulp本: http://www.manning.com/baumgartner

于 2015-09-10T14:07:01.270 に答える