在使用gulp进行构建时，让browserify为我提供源代码

Question

我有一个gulpfile（好吧，一个gulpfile.babel.js文件）正在将我的es6项目构建到es5项目中。

我正在尝试将源图添加到构建过程中。

我在下面做错了 - 我在运行文件时遇到以下错误...

/Users/chris/src/MyAwesomeProject/node_modules/gulp-sourcemaps/index.js:20
    if (file.isNull() || file.sourceMap) {
             ^

我认为我实际上应该包装＆＃39; transform（）＆＃39;我的＆＃39; sourcemaps.init（）＆＃39;之间的通话和我的sourcemaps.write（）＆＃39; ...但是那些想要生活在＆＃39; pipe（）＆＃39;方法，这些方法一直存在，直到我打电话给＆＃39; bundle（）＆＃39; ...

如何让这个过程吐出源图？

import {createWriteStream} from "fs";
import {spawn} from "child_process";
import gulp from "gulp";
import browserify from "browserify";
import browserifyInc from "browserify-incremental";
import babelify from "babelify";
import rename from "gulp-rename";
import runSequence from "run-sequence";
import sourcemaps from "gulp-sourcemaps";
import gutil from "gulp-util";
const debug = process.env.NODE_ENV === "development";
let cocosWebProcess = null;

gulp.task("babel", () => {
  const b = browserify("./lib/app.js", Object.assign({
    debug: true,
    paths: ["./node_modules", "./lib"]
  }, browserifyInc.args));

  // compile ES6/JSX
  b.transform(babelify.configure({
    ignore: /node_modules/,
    stage: 1
  })).on("error", function(error) {
    console.log(`Babel Error: ${error}`);
    this.emit("end");
  });

  // Cache
  browserifyInc(b, {cacheFile: "./.browserify-cache"});

  return b
    .bundle()
    .pipe(sourcemaps.init({loadMaps: true}))
    .pipe(sourcemaps.write("./cocos-app/src/"))
    .pipe(createWriteStream("./cocos-app/src/app.js"));
});

// etc... gulp file does other things after this...

Answer 1

我最终使用了以下解决方案：

1. 仅转换已更改的文件
2. 生成源地图

3. 使用PrettyError和源地图呈现错误（参见图片）

   const gulp = require("gulp");
   const babel = require("gulp-babel");
   const sourcemaps = require("gulp-sourcemaps");
   const insert = require('gulp-insert');
   const PrettyError = require("pretty-error");
   const cache = require("gulp-cached");
   const errEngine = new PrettyError();
   
   function onError(error) {
     console.error("Gulp error");
     console.error(errEngine.render(error));
   }
   
   gulp.task("compile", function() {
     return gulp
       .on("error", onError)
       .src("src/**/*.js")
       .pipe(cache("compile"))
       .pipe(sourcemaps.init({loadMaps: true}))
       .pipe(babel())
       .pipe(insert.prepend("PrettyError.start();"))
       .pipe(insert.prepend("const PrettyError = require('pretty-error');"))
       .pipe(insert.prepend("require('source-map-support').install();"))
       .pipe(sourcemaps.write("."))
       .pipe(gulp.dest("build"));
   });