web-dev-qa-db-ja.com

gulp：uglifyとソースマップ

Gulpを使用しています。

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）を作成する必要がありますか？

javascriptmappinggulpgulp-sourcemaps
45
Serge

これがGulpでのソースマップの動作です：gulp.srcで選択した各要素は、元のファイル名と同様に、バッファーのコンテンツで構成される仮想ファイルオブジェクトに転送されます。これらはストリームを介してパイプされ、そこでコンテンツが変換されます。

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

グロビングの直後にソースマップを配置し、結果を保存する前にソースマップを直接保存することをお勧めします。 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にそれらを物理ファイルに具体化するよう指示するだけです。

同じソースマッププラグインがGulp 4にネイティブに含まれます： http://fettblog.eu/gulp-4-sourcemaps/ -方法の詳細を知りたい場合ソースマップはGulpで内部的に動作します。それらは私のGulpブックの第6章にあります： http://www.manning.com/baumgartner

99
ddprrt