gulp-sourcemaps.init()/write()はどこに記述すべきか

ここのところ、クライアントサイドMVCの自分用のボイラープレート・プロジェクトをつくろうとあれこれ調べものをしているのですが、その過程でstackoverflowで見つけたgulp-sourcemapsについてのポストの訳出です。まあ例によって言われてみれば当たり前っぽい話なのですが。。。

　　　　　＊　＊　＊

Gulp: uglify と sourcemaps

質問 Sep 10 '15 at 13:02 Serge

私はいまGulpを使っています。

1つもしくは2つ以上のJSファイル（例えばjQueryのような）があってこれを1つのファイルにまとめて、オブファスケートし、そしてディストリビューション・フォルダ（/dist）配下に出力したいのです。

そこで、私はこんなふうにしました：

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()) ここですか ???
        .pipe(concat(filenameRoot + '.js'))
        .pipe(sourcemaps.init()) // それともここに ???

        .pipe(gulp.dest(destinationFolder)) // .jsファイルを保存
        .pipe(uglify({ preserveComments: 'license' }))
        .pipe(rename({ extname: '.min.js' }))
        .pipe(gulp.dest(destinationFolder)) // .min.jsファイルを保存
        .pipe(sourcemaps.write('maps'))
        .pipe(gulp.dest(destinationFolder)) // .mapファイルを保存
}

私にはgulp-sourcemapsの.init()をどこに記述すべきか判断がつきません。。。

mapファイルは複数個（私の例の場合は2つ）できてしまうのですがそれはしかたないのでしょうか（これらのファイルをブラウザはうまく処理できないようですが）、それとも単一ファイル（/maps/myModule.map）にすることも可能なのでしょうか？

回答 Sep 10 '15 at 14:07 ddprrt

Gulpのストリーム処理のなかでgulp-sourcemapsは次のように機能します： gulp.src()で選択された要素は個々に仮想的なファイル・オブジェクトに変換されます。それらはバッファに格納されたコンテンツからなり、もとのファイルと同じ名前を持ちます。それらはストリームからストリームへと順々に送られていくなかで、変換されていきます。

gulp-sourcemapsを利用すると、あなたはもう1つの属性─その名もsourcemap──をこの仮想的なファイル・オブジェクトの情報の1つとして追加することになります。それぞれの変換が行われるにつれて、このsourcemapの値もまた変換を被ることになります。ここでもしあなたが、concat()の後方、かつuglify()の前方にsourcemaps.init()を使用したら、sourcemapsはその特定のステップからの変更を保存します。sourcemapsにとって変換前のファイルとはconcatのステップで生成されたファイルであり、sourcemapsにとっての変換とはuglifyのステップにおけるそれだけということになります。こうして生成されたファイルをブラウザで開いても、もとのJSファイルと変換後のJSファイルのマッピングはうまく行かないはずです・

gulp-sourcemapsは gulp.src()の直後に配置すべきでしょう。そしてsourcemaps.writeは変換結果を保存するステップの直前に配置します。こうすることでgulp-sourcemapsはそれぞれの変換のステップにおいて起こった変化のすべてについて記録をすることができるようになります。変換前のソース・ファイルはgulp.src()で選択されたそれぞれのファイルです。こうしてブラウザはmapファイルにより変換後の単一のJSファイルから変換前の複数のファイルまで遡ることができるようになります。

あなたのストリームはこうなります：

 return gulp.src(sourceFiles)
    .pipe(sourcemaps.init())
    .pipe(plumber())
    .pipe(concat(filenameRoot + '.js'))
    .pipe(gulp.dest(destinationFolder)) // .jsファイルを保存
    .pipe(uglify({ preserveComments: 'license' }))
    .pipe(rename({ extname: '.min.js' }))
    .pipe(sourcemaps.write('maps'))
    .pipe(gulp.dest(destinationFolder)) // .min.jsファイルを保存

sourcemaps.writeのステップ自体は実際にはファイルを出力しません。このステップはGulpに対して、gulp.dest()がコールされたときソースマップを物理的なファイルとして保存せよと指示するだけです。

これと非常に似通ったsourcemapプラグインはGulpバージョン4にネイティブに組み込まれる予定です： http://fettblog.eu/gulp-4-sourcemaps/ ──sourcemapsがGulpとともにどのように機能するか、より詳しく知る必要がある場合は、私のGulp bookの第6章を参照してください： http://www.manning.com/baumgartner

　　　　　＊　＊　＊

原典は"
gulp: uglify and sourcemaps
"（2016/11/16 2:00取得）です。