使用 gulp 构建时让 browserify 给我源图答案

【问题标题】：Getting browserify to give me sourcemaps when building with gulp使用 gulp 构建时让 browserify 给我源图
【发布时间】：2016-01-09 15:03:48
【问题描述】：

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

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

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

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

我认为我实际上应该在我的 'sourcemaps.init()' 和我的 'sourcemaps.write()' 之间包装 'transform()' 调用......但是那些想要生活在'链中' pipe()' 方法，这些方法直到我调用 'bundle()' 之后才存在......

我怎样才能让这个过程吐出源图？

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...

【问题讨论】：

标签： gulp browserify babeljs source-maps

【解决方案1】：

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

仅转译更改的文件
生成源地图

使用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"));
});

【讨论】：