Question

在我目前的工作流程中，我需要创建browserify包，但也希望将非commonjs js库连接到文件的开头以公开全局变量，同时还减少http请求的数量和js文件的大小。（其他捆绑包也可能需要其中一些库）

我目前有一个gulp任务，它创建了browserify包并将所有必需的libs连接到输出文件的开头，但是我发现在合并流时，我的源图是破坏的，并且在网络检查员;生成的映射仅显示预先uglified browserify包，而不是单独的js模块。

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数组，以构建多个包，如果存在多个包）

有没有办法可以保留预合并流中的源图？将loadmaps设置为true似乎无法正常工作。

另外，作为一个完整性检查，我的方法会被认为是合理的吗？我是否错过了一些非常简单的方法来实现我想要的结果？

Answer 1

确保以下行位于管道的开头，这应该正确保留源图。

.pipe(gulpif(env !== "production", sourcemaps.init()))

合并JS流时保留源映射（使用browserify bundle连接lib依赖项）

1 个答案: