9

私の現在のワークフローでは、browserify バンドルを作成する必要がありますが、非 commonjs js ライブラリをファイルの先頭に連結してグローバル変数を公開すると同時に、http リクエストの数と js ファイルのサイズを削減したいと考えています。(これらのライブラリの一部は、他のバンドルでも必要になる場合があります)

私は現在、browserify バンドルを作成し、必要なライブラリを出力ファイルの先頭に連結する gulp タスクを持っていますが、ストリームをマージする時点で、ソースマップが壊れていて、Web インスペクタであることがわかりました。結果のマップには、個別の js モジュールではなく、事前にブラッシュアップされた browserify バンドルのみが表示されます。

var gulp          = require("gulp"),
buffer            = require('vinyl-buffer'),
gulpif            = require("gulp-if"),
sourcemaps        = require("gulp-sourcemaps"),
merge             = require('merge-stream'),
concat            = require('gulp-concat'),
uglify            = require("gulp-uglify")
livereload        = require("gulp-livereload");

// compile scripts
gulp.task("scripts", function() {
  "use strict";

  // Iterate over bundles
  var tasks = config.browserifyBundles.map(function(item){

    // Use entry file for output file name
    var outputName = item.mainfile.replace(/^.*[\\\/]/, ''); 
    var browserifyStream = browserify({
      entries: item.mainfile,
      debug: env !== "production"
    }).bundle()
    .on("error", notify.onError())
    .pipe(source(outputName))
    .pipe(buffer())
    .pipe(gulpif(env !== "production", sourcemaps.init()))
    .pipe(gulpif(env !== "production", sourcemaps.write()));

    // Get files to concat stream from json array
    var libStream = gulp.src(item.concat);

    return merge(libStream, browserifyStream)
      .pipe(gulpif(env !== "production", sourcemaps.init({loadMaps: true})))
      .pipe(concat(outputName))
      .pipe(uglify())
      .pipe(gulpif(env !== "production", sourcemaps.write()))
      .pipe(gulp.dest(config.projectDir + "js/"))
      .pipe(notify("updated"))
      .pipe(livereload());
  });


  // create a merged stream
  es.merge.apply(null, tasks);
});

(複数のバンドルが存在する場合、私のタスクは設定 json 配列も読み取って複数のバンドルを構築することに注意してください)

マージ前のストリームからソースマップを保存する方法はありますか? true に設定されている loadmaps が機能していないようです。

また、健全性チェックとして、私のアプローチは賢明と見なされますか? 目的の結果を達成するための非常に簡単な方法がありませんか?

4

1 に答える 1